Load partial view on button click

Question

This question might be repeated but I have some issue. I have a drop down list and search button in my page. where I bind view with model on drop down list on change event. And when clicking on Search button value selected in drop down list regarding list of records is displaying in partial view. This all done properly as bellow:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ApricaCRMEvent.Models.CRM.DatabaseEntities.CRM_Doctor_Request>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    MDLNoDDLIndex
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../../Scripts/jquery.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>

    <script type="text/javascript">
        //script for binding drop down list value from view to model
        $("#viewlist").hide();
        function TestFun() 
        {
            var mdlno = $("#ddlMDLNo").val();
            var txtmdlno = document.getElementById("Request_For_Id");
            txtmdlno.value = mdlno;
            //alert(txtmdlno.value);
           $("#viewlist").hide();
        }
         var mdlno = $("#ddlMDLNo").val();
         function Datalist(mdlno) {
             $("#viewlist").show();
             $.ajax({
                 url: "/Search/MDLNoDataList", //url or controller with action
                 type: "POST",
                 data: mdlno,
                 dataType: "html",

                 success: function (data) {

                     $("#viewlist").html(data); //target div id
                 },
                 error: function () {
                     alert("No Projects Found");
                     $("#viewlist").html('there is error while submit');
                 }
             });
         }


        //$(function () { $("#btnclick").click(function () { $("#viewlist").load('/Search/MDLNoDataList') }); });

        //script for loading partial view into div tag "viewlist"

</script>
<div>
<h2>Search by MDLNo</h2>

    <% using (Html.BeginForm())
    { %>

         <%: Html.ValidationSummary(true, "Profile Updation was unsuccessful. Please correct the errors and try again.") %>

          Select MDLno 

            <%= Html.DropDownList("ddlMDLNo", ViewData["MDLno"] as SelectList, "--Select One--", new { onchange = "TestFun()" })%> 
            <%: Html.HiddenFor(model => model.Request_For_Id) %>

            <input type="submit" value="search" name="SearchMDLNo" id="btnclick" onclick ="Datalist(a)"/>    
            <div id="viewlist"><%Html.RenderAction("MDLNoDataList"); %> </div> <%--partial view should be loaded here.--%>

    <% } %> 

</div>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>

Everything works properly but.. partial view of div tag is showing before clicking on search button. I want that .. The partial view load when i click on button

for that I have tried this code :

$("#btnclick").click(function () { $("#viewlist").load('/Search/MDLNoDataList.ascx') });

And I have also tried .show() and .hide() but problem with that is .. Whenever i click on button whole page gets refreshed so .. loading partial view is not done properly.

controller:

 public ActionResult MDLNoDDLIndex()
        {
            ViewData["MDLno"] = new SelectList(CRMSearchReportDL.getAllMDLno(), "Request_For_Id", "Request_For_Id");
            return View();
        }

        [HttpPost]
        public ActionResult MDLNoDDLIndex(CRM_Doctor_Request model)
        {
            ViewData["MDLno"] = new SelectList(CRMSearchReportDL.getAllMDLno(), "Request_For_Id", "Request_For_Id");

            //mdlnoObj = SearchMDLNoDL.getMDLData(model.Request_For_Id);
            return View();
        }


        public ActionResult MDLNoDataList()
        {
            List<CRM_Doctor_Request> drlist = new List<CRM_Doctor_Request>();
            return PartialView(drlist);
        }
        [HttpPost]
        public ActionResult MDLNoDataList(CRM_Doctor_Request model)
        {
            return PartialView(CRMSearchReportDL.getMDLNoWiseDetails(model.Request_For_Id));
        }

Answer 1

I have compiled all of my snippets of suggestions into the markup that I think will get you what you need. It is as follows.

Please bear in mind that I have just typed this in Notepad so it might have syntax errors, but the strategy should get you where you need to be at.

NB: We are trying to use an AJAX technique, so we don't really want to postback the form because that will cause the entire page to refresh, therefore, the submit button has to become just a plain button.

So our strategy is to:

• render the main form elements and
• handle the either:
  • the button click event or
  • the dropdown change event-- in this case we have to omit the button altogether.

If we want to update the results only after the button is clicked, then:

When the button is clicked, we fetch the partial view containing the grid of results and replace the entire inner HTML in #viewlist with the HTML for the partial view.

We don't really need to hide #viewlist. We can just leave it empty, or display some other HTML that contains notification text that there are no results, or instructions telling the user what to do.

If we want to update the results as soon as the value in the dropdown is changed, then:

We keep the change handler for the dropdown and omit the click handler for the button (and the button altogether).

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ApricaCRMEvent.Models.CRM.DatabaseEntities.CRM_Doctor_Request>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    MDLNoDDLIndex
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        <h2>Search by MDLNo</h2>
        <% using (Html.BeginForm()) { %>
        <%: Html.ValidationSummary(true, "Profile Updation was unsuccessful. Please correct the errors and try again.") %>
            Select MDLno

            <%= Html.DropDownList("ddlMDLNo", ViewData["MDLno"] as SelectList, "--Select One--" }) %>
            <%: Html.HiddenFor(model => model.Request_For_Id) %>

            <!-- delete this line if you decide to keep the dropdown change event handler and omit the button click event handler -->
            <input id="btnclick" name="SearchMDLNo" type="button" value="search" />

            <div id="viewlist">
            <!-- this partial view should return the result grid or should return an element stating either "No data" or some instructions -->
            <%: Html.Action("MDLNoDataList") %>
            </div>
        <% } %> 
    </div>

    <script type="text/javascript" src="~/Scripts/jquery.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-migrate-1.0.0.js"></script>
    <script type="text/javascript">

        // NOTE : the document ready handler looks like this:
        // $(function () {
        //     code placed here waits for the DOM to fully load before it is executed
        //     this is very important so as to avoid race conditions where sometimes the code
        //     works but other times it doesn't work, or varies from browser to browser or
        //     based on connection speed
        // });

        $(function () {
            // NOTE : keep ONLY one of either $('#ddlMDLNo').change(...) or $('#btnclick').click(...)

            // attach the change event handler in an unobtrusive fashion, rather than directly on
            // the DOM element
            $('#ddlMDLNo').change(function () {
                var mdlno = $('#ddlMDLNo').val();

                $.ajax({
                    url: "/Search/MDLNoDataList",
                    type: "POST",
                    data: {
                        mdlno: mdlno
                    },
                    dataType: "html",
                    success: function (data) {
                        $("#viewlist").html(data);
                    },
                    error: function () {
                        alert("No Projects Found");
                        $("#viewlist").html('An error has occurred');
                    }
                });
            });

            // attach the click event handler in an unobtrusive fashion, rather than directly on
            // the DOM element
            $('#btnclick').click(function () {
                var mdlno = $('#ddlMDLNo').val();

                $.ajax({
                    url: "/Search/MDLNoDataList",
                    type: "POST",
                    data: {
                        mdlno: mdlno
                    },
                    dataType: "html",
                    success: function (data) {
                        $("#viewlist").html(data);
                    },
                    error: function () {
                        alert("No Projects Found");
                        $("#viewlist").html('An error has occurred');
                    }
                });
            });

        });
    </script>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>