locked
How to add "Panel"-like sections in MVC View. RRS feed

  • Question

  • User-501297529 posted

    I have a view that has two dropdowns and a input textbox. This will be what users see as the main view. The View also has 4 links on it that when I click on "<a href="">Add Description</a>"  it will open a section to add a description in a text area. Otherwise this section is hidden. The Add Category link will add to the CategoryId dropdown. I bolded the 4 links below. I know in webforms that you could do panels but I'm not sure how to do that in MVC. 

    <div class="row">
            <div class="col-md-4">
                <form asp-action="EditItemCategories">
                    <div asp-validation-summary="ModelOnly" class="alert-danger"></div>
                    <input asp-for="ItemId" />
                    <div class="container form-group">                    
                        <div class="row">
                            <div class="col-md-2"><label asp-for="CategoryId"></label></div>
                            <div class="col-md-4">
                                <select asp-for="CategoryId"
                                        asp-items="Model.Categories"></select><a asp-area="Admin" title="Add Category" asp-controller="Item" asp-action="ManageStatuses">Add Category </a>
                            </div>
                        </div>
    
                        <div class="row">
                            <div class="col-md-2"><label asp-for="Order" /></div>
                            <div class="col-md-4"><input asp-for="Order" /></div>
                        </div>
    
                        <div class="row">
                            <div class="col-md-2"><label asp-for="StatusId" /></div>
                            <div class="col-md-4">
                                <select asp-for="StatusId"
                                        asp-items="Model.Statuses"></select>
                            </div>
                        </div>
    
                        <div class="row">
                            <div class="col-md-4">
                                <input type="hidden" value="Responsibility" />
                                <a href="#">Add Responsibility</a>
                            </div>
                        </div>
    
                        <div class="row">
                            <div class="col-md-4">
                                <input type="hidden" value="Description" />
                                <a href="#">Description</a>
                            </div>
                        </div>
    
                        <div class="row">
                            <div class="col-md-4">
                                <input type="hidden" value="Response" />
                                <a href="#">Add Response</a>
                            </div>
                        </div>
    
                       
                        <div class="row">
                            <div class="col-md-2"><input type="submit" value="Save Changes" class="btn btn-primary" /></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    Tuesday, August 20, 2019 1:51 PM

Answers

  • User475983607 posted

    Your code makes little logical sense.  The AJAX is garbing file contents from the server and placing the content in div1. 

    I think you are after code like this...

    @{
        ViewData["Title"] = "Home Page";
    }
    
        <div>
            <form method="post">
                <div class="row">
                    <div class="col-md-2">
                        <a id="responseLink" href="#">Add Response</a>
                    </div>
                    <div id="div1" style="display:none" class="col-md-10">
                        <div>
                            <textarea name="Response"></textarea>
                        </div>
                        <div>
                            <input type="submit" value="Save Changes" class="btn btn-primary" />
                        </div>
                    </div>
                </div>
            </form>
            @if(ViewData["Response"] != null)
            {
                <div>
                    @ViewData["Response"]
                </div>
            }
        </div>
    
    @section scripts {
        <script>
            $('#responseLink').click(function () {
                $('#div1').show();
            });
        </script>
    }
            [HttpGet]
            public IActionResult Index()
            {   
                return View();
            }
    
            [HttpPost]
            public IActionResult Index(string Response)
            {
                ViewData["Response"] = Response;
                return View();
            }

    Keep in mind this is just demo code to show a simple pattern. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 20, 2019 4:01 PM

All replies

  • User475983607 posted

    bootzilla

    I have a view that has two dropdowns and a input textbox. This will be what users see as the main view. The View also has 4 links on it that when I click on "<a href="">Add Description</a>"  it will open a section to add a description in a text area. Otherwise this section is hidden. The Add Category link will add to the CategoryId dropdown. I bolded the 4 links below. I know in webforms that you could do panels but I'm not sure how to do that in MVC. 

    In ASP.NET Web Forms a panel server control renders as a <div> element.  Panel visibility is controlled through the Visibility property and set on the server.

    In MVC, Razor syntax is used to control what HTML is rendered to the browser.  The following code is similar to setting a panel's visibility to false.  Keep in mind, this is a contrived example to show the pattern.

        <div>
            @if (true)
            {
                <div>Hello World</div>
            }
            else
            {
                <div>Foo Bar</div>
            }
        </div>

    Your example is using CSS which is not at all like an ASP.NET Panel Control since the visibility is toggled on the client not the server.  Do you really need a JavaScript solution?

    Tuesday, August 20, 2019 2:14 PM
  • User-474980206 posted

    if you mean update panel, than in MVC you write the javascript / ajax code to do this. see jQuery's $.ajax and $().html() methods. google for lots of cascading dropdown examples (again $.ajax)

    Tuesday, August 20, 2019 2:50 PM
  • User-501297529 posted

    mgebhard

    bootzilla

    I have a view that has two dropdowns and a input textbox. This will be what users see as the main view. The View also has 4 links on it that when I click on "<a href="">Add Description</a>"  it will open a section to add a description in a text area. Otherwise this section is hidden. The Add Category link will add to the CategoryId dropdown. I bolded the 4 links below. I know in webforms that you could do panels but I'm not sure how to do that in MVC. 

    In ASP.NET Web Forms a panel server control renders as a <div> element.  Panel visibility is controlled through the Visibility property and set on the server.

    In MVC, Razor syntax is used to control what HTML is rendered to the browser.  The following code is similar to setting a panel's visibility to false.  Keep in mind, this is a contrived example to show the pattern.

        <div>
            @if (true)
            {
                <div>Hello World</div>
            }
            else
            {
                <div>Foo Bar</div>
            }
        </div>

    Your example is using CSS which is not at all like an ASP.NET Panel Control since the visibility is toggled on the client not the server.  Do you really need a JavaScript solution?

    I'm not sure what I need. If Javascript is the best way I'd rather use that. 

    So if I use your example how would it know what is true and what is false based off those If else conditions. When I click on Add Response link for example I want the text area and Save button to show but how does that work with those if conditions? Does something need to be set in the href to get that to work? That's what I'm not sure how to do.

    <div class="row">
    <div class="col-md-4">
    <input type="hidden" value="Response" />
    <a href="#">Add Response</a>
    </div>
    @if (true)
    {
    <div class="col-md-4">
    <textarea></textarea>
    </div>
    <div class="row">
    <div class="col-md-2"><input type="submit" value="Save Changes" class="btn btn-primary" /></div>
    </div>
    }
    </div>
    
    <div class="row">
    <div class="col-md-4">
    <input type="hidden" value="Responses" />
    <a href="#">View All Responses</a>
    </div>
    @if (true)
    {
    <div class="col-md-4">
    <textarea></textarea>
    </div>
    <div class="row">
    <div class="col-md-2"><input type="submit" value="Save Changes" class="btn btn-primary" /></div>
    </div>
    }
    </div>
    
    

    Tuesday, August 20, 2019 2:57 PM
  • User-501297529 posted

    if you mean update panel, than in MVC you write the javascript / ajax code to do this. see jQuery's $.ajax and $().html() methods. google for lots of cascading dropdown examples (again $.ajax)

    I am trying this using javascript/ajax and have something like this. I get this from https://www.w3schools.com/jquery/ajax_ajax.asp

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("a").click(function(){
                $.ajax({url: "demo_test.txt", success: function(result){
                    $("#div1").html(result);
                }});
            });
        });
    </script>
    
    <div class="row">
                            <div class="col-md-4">
                                <input type="hidden" value="Response" />
                                <a href="#">Add Response</a>
                            </div>
                            <div id = "div1" class="col-md-4">
                                <textarea></textarea>
                                <div class="col-md-2"><input type="submit" value="Save Changes" class="btn btn-primary" /></div>
                            </div>
                        </div>

    How do I get the text area to show instead of 'This is some text in a paragraph.' and also how do I get it so if I click 'Add a Response again the text area will disappear  after I click on it the first time? For example, I click Add a Response the text area shows, click on it again text area disappears.

    Tuesday, August 20, 2019 3:39 PM
  • User-474980206 posted

    the javascript is simple:

    <div class="row">
       <div class="col-md-4" id="descLink">
         <a href="#" onclick="$('#descLink').addClass('hidden');$('#descInput').removeClass('hidden');">Description</a>
       </div>
       <div class="col-md-4 hidden" id="descInput">
         <div><textarea id="Description" name="Description"></textarea><div>
         <div>
           <a href="#" onclick="$('#descLink').removeClass('hidden');$('#descInput').addClass('hidden');">Cancel</a>
         </div>
       </div>
    </div>

    or using bootstrap collapse:

    <div class="row">
       <div class="col-md-4" id="descLink">
         <a href="#descInput" data-toggle="collapse">Description</a>
       </div>
       <div class="col-md-4 collapse" id="descInput">
         <div><textarea id="Description" name="Description"></textarea><div>
       </div>
    </div>

    not sure the point of your hidden fields as they don't post back.

    Tuesday, August 20, 2019 3:55 PM
  • User475983607 posted

    Your code makes little logical sense.  The AJAX is garbing file contents from the server and placing the content in div1. 

    I think you are after code like this...

    @{
        ViewData["Title"] = "Home Page";
    }
    
        <div>
            <form method="post">
                <div class="row">
                    <div class="col-md-2">
                        <a id="responseLink" href="#">Add Response</a>
                    </div>
                    <div id="div1" style="display:none" class="col-md-10">
                        <div>
                            <textarea name="Response"></textarea>
                        </div>
                        <div>
                            <input type="submit" value="Save Changes" class="btn btn-primary" />
                        </div>
                    </div>
                </div>
            </form>
            @if(ViewData["Response"] != null)
            {
                <div>
                    @ViewData["Response"]
                </div>
            }
        </div>
    
    @section scripts {
        <script>
            $('#responseLink').click(function () {
                $('#div1').show();
            });
        </script>
    }
            [HttpGet]
            public IActionResult Index()
            {   
                return View();
            }
    
            [HttpPost]
            public IActionResult Index(string Response)
            {
                ViewData["Response"] = Response;
                return View();
            }

    Keep in mind this is just demo code to show a simple pattern. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 20, 2019 4:01 PM
  • User-501297529 posted

    the javascript is simple:

    <div class="row">
       <div class="col-md-4" id="descLink">
         <a href="#" onclick="$('#descLink').addClass('hidden');$('#descInput').removeClass('hidden');">Description</a>
       </div>
       <div class="col-md-4 hidden" id="descInput">
         <div><textarea id="Description" name="Description"></textarea><div>
         <div>
           <a href="#" onclick="$('#descLink').removeClass('hidden');$('#descInput').addClass('hidden');">Cancel</a>
         </div>
       </div>
    </div>

    or using bootstrap collapse:

    <div class="row">
       <div class="col-md-4" id="descLink">
         <a href="#descInput" data-toggle="collapse">Description</a>
       </div>
       <div class="col-md-4 collapse" id="descInput">
         <div><textarea id="Description" name="Description"></textarea><div>
       </div>
    </div>

    not sure the point of your hidden fields as they don't post back.

    The hidden fields shouldn't be there. My fault. I removed them. They were just placeholders. Does that change how your example should work.

    Tuesday, August 20, 2019 4:55 PM
  • User-474980206 posted

    no

    Tuesday, August 20, 2019 5:46 PM