MVC Razor Dropdownlist value get reset when clicking on WebGrid paging - asp.net-mvc

Question

I've been stuck almost two days now and still couldn't find a solution.
I have a WebGrid in a partial view, and I'm loading it inside the main view which has 4 search fields.
I'm using Request.IsAjaxRequest() to identify which view has to be loaded.
If it's an Ajax call I return the Partial View else the Main View. If I return the "Main View" the Dropdownlist value get reset as it refresh. I want to keep the Dropdownlist value selected by the user after the results has been loaded.
Here's my Main View,
<div class="row">
#if (Model != null)
{
<div class="col-md-4 col-lg-3">
<div class="well well-sm well-min-height well-panel-remove-top-padding">
<div class="form-group">
#Html.Label("Search by State", new { #class = "form-font-size label-margin-top" })
#Html.DropDownList("stateList", (SelectList)ViewBag.StatesList, "ALL", new { #class = "form-control", #id = "ddlState" })
#*<select class="form-control" id="ddlState">
<option value="0">ALL</option>(SelectList)ViewBag.StatesList
<option value="1">NT</option>
<option value="2">WA</option>
<option value="3">QLD</option>
</select>*#
</div>
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="well well-sm well-min-height well-panel-remove-top-padding">
<div class="form-group">
#Html.Label("Search by Job Id", new { #class = "form-font-size label-margin-top" })
<input type="text" value="#ViewBag.JobId" id="txtName" class="form-control uppercase" />
#*<div class="col-sm-7 col-md-6">
<input type="text" id="txtName" class="form-control uppercase form-control-search-panel-textbox-height" />
</div>*#
</div>
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="well well-sm well-min-height well-panel-remove-top-padding">
<div class="form-group">
#Html.Label("Search by Client", new { #class = "form-font-size label-margin-top" })
<input type="text" value="#ViewBag.Client" id="txtClientName" class="form-control uppercase" />
#*<div class="col-sm-7 col-md-6">
<input type="text" id="txtClientName" class="form-control uppercase form-control-search-panel-textbox-height" />
</div>*#
</div>
</div>
</div>
<div class="col-md-4 col-lg-3">
<div class="well well-sm well-min-height well-panel-remove-top-padding">
<div class="form-group">
#Html.Label("Search by Location", new { #class = "form-font-size label-margin-top" })
<input type="text" value="#ViewBag.Location" id="txtLocation" class="form-control uppercase" />
#*<div class="col-sm-7 col-md-6">
<input type="text" id="txtClientName" class="form-control uppercase form-control-search-panel-textbox-height" />
</div>*#
</div>
</div>
</div>
<div class="col-xs-12 col-sm-8 increase-bottom-padding">
<span class="glyphicon glyphicon-search glyphicon-margin-right"></span>All Jobs
<span class="glyphicon glyphicon-search glyphicon-margin-right"></span>My Jobs
</div>
<div id="grid">
#Html.Partial("_JobInstructionWebGridPartial")
</div>
}
else
{
<div class="col-xs-12 col-sm-8 increase-bottom-padding-job remove-left-right-padding">
<span class="glyphicon glyphicon-search glyphicon-margin-right"></span>All Jobs
</div>
#:<div class="col-md-12 alert alert-danger"><strong>You don't have any jobs, If you want to search any Job please click on "'All Jobs'" ..</strong></div>
}
</div>
Here's my Partial View
#model IEnumerable<SurveyManagement.Models.Job.ViewModel_JobInstruction_WebGrid>
#{
if (Model != null)
{
var grid = new WebGrid(source: Model, canPage: true, canSort: false, rowsPerPage: 10, ajaxUpdateContainerId: "jobgridcontent");
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="table-responsive">
<div class="table" id="tbljobbook">
#grid.GetHtml(tableStyle: "table table-striped table-bordered table-hover",
headerStyle: "jobinstruction-webgrid-header",
footerStyle: "webgrid-footer",
alternatingRowStyle: "webgrid-alternating-row",
selectedRowStyle: "webgrid-selected-row",
rowStyle: "webgrid-row-style",
columns:
grid.Columns(
grid.Column("JobId", header: "Job Id", style: "jobinstruction-row-style col-md-1", format: #<text><label class="lblJobId">#item.JobId</label> </text>),
grid.Column("ClientName", header: "Client Name", style: "col-md-2 job-webgrid-column-max-width uppercase"),
grid.Column("JobLocation", header: "Job Location", style: "col-md-2 job-webgrid-column-max-width"),
grid.Column("JobDescription", header: "Job Description", style: "col-md-2 job-webgrid-column-max-width"),
grid.Column("JobStatus", header: "Job Status", style: "jobinstruction-row-style col-md-1 uppercase"),
grid.Column("Action", format: #<text>
<button type="button" class="edit-user btn btn-info btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="Edit Job"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-swr btn btn-tumblr btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="SWR List"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-swr-new btn btn-facebook btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="New SWR"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-view btn btn-primary btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="Field Entry List"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-create btn btn-warning btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="New Field Entry"><i class="fa fa-list"></i></button>
<button type="button" class="job-entry-admin btn btn-danger btn-social-icon btn-sm" data-placement="top" data-toggle="tooltip" title="Admin"><i class="fa fa-list"></i></button></text>, style: "col-md-4 jobinstruction-row-style", canSort: false)
))
</div>
</div>
</div>
}
Calling the Controller Action on Dropdownlist change event,
$(document).ready(function () {
$('#ddlState').change(function () {
$.ajax({
type: "GET",
url: '#Url.Action("SearchJobDetails")',
data: { jobId: $('#txtName').val(), client: $('#txtClientName').val(), location: $('#txtLocation').val(), state: $("#ddlState option:selected").text() },
success: function (data) {
$('#grid').html(data);
}
});
});
});
Here is my Controller Action,
public ActionResult SearchJobDetails(string jobId = null, string client = null, string location = null, string state = null)
{
try
{
ViewBag.IsRecordsSave = false;
ViewBag.sectionid = 1;
ViewBag.Location = location;
ViewBag.Client = client;
ViewBag.JobId = jobId;
List<States> StateList = Enum.GetValues(typeof(States)).Cast<States>().ToList();
ViewBag.StatesList = new SelectList(StateList);
ViewBag.SelectedState = state;
if (Request.IsAjaxRequest())
{
return PartialView("_JobInstructionWebGridPartial", GetJobDetails(jobId, client, 0, location, state));
}
else
{
return View("JobInstructionsDetails", GetJobDetails(jobId, client, 0, location, state));
}
}
}
As you can see in the above controller, ViewBag.StatesList is where I assign the States in my Enum. If I return the View (else part), the dropdownlist value get reset. I managed to keep the input text box values by putting value="#ViewBag.Location" so it set the values back from ViewBag. How do I do that for the Dropdownlist? Please help.

Answer 1

You need to use Html.DropdownlistFor Just modify the code as shown in the example below.where m.jobID is the selected value. To keep the value after postback its wise to use Model always.
#Html.DropDownListFor(m => m.jobID, new SelectList(Model.Clients, "ID", "ClientName"),new { #class = "form-control" })