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>
Best Answer
The following example works fine for me.
Model:
Controller:
Index.cshtml
view:Foo.cshtml
partial:Notice that I have used a GET request to refresh the grid instead of POST because this way the
value
query string parameter selected in the dropdown is preserved for future sorting and paging.