单击 WebGrid 分页时，MVC Razor 下拉列表值会重置

Question

我已经卡住了将近两天了，仍然找不到解决方案。 我在部分视图中有一个 WebGrid，我将它加载到具有 4 个搜索字段的主视图中。 我正在使用Request.IsAjaxRequest() 来确定必须加载哪个视图。 如果是 Ajax 调用，我将返回部分视图，否则返回主视图。如果我返回“主视图”，下拉列表值会在刷新时重置。我想在加载结果后保留用户选择的 Dropdownlist 值。

这是我的主视图，

<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">
            <a href="@Url.Action("JobInstructionsDetails", "Job", new { showstatus = true })" class="btn btn-twitter button-left-right-padding"><span class="glyphicon glyphicon-search glyphicon-margin-right"></span>All Jobs</a>
            <a href="@Url.Action("JobInstructionsDetails", "Job", new { showstatus = false })" class="btn btn-twitter button-left-right-padding"><span class="glyphicon glyphicon-search glyphicon-margin-right"></span>My Jobs</a>
        </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">
            <a href="@Url.Action("JobInstructionsDetails", "Job", new { showstatus = true })" class="btn btn-twitter button-left-right-padding"><span class="glyphicon glyphicon-search glyphicon-margin-right"></span>All Jobs</a>
        </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>

这是我的部分视图

@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> 
}

在下拉列表更改事件上调用控制器操作，

$(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);
            }
        });
    });
});

这是我的控制器动作，

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));
        }
    }
}

正如您在上面的控制器中看到的，ViewBag.StatesList 是我在枚举中分配状态的位置。如果我返回视图（其他部分），下拉列表值将被重置。我设法通过输入value="@ViewBag.Location" 来保留输入文本框的值，因此它将值从ViewBag 设置回来。我该如何为下拉列表做到这一点？请帮忙。

Answer 1

你需要使用 Html.DropdownlistFor 只需修改代码如下例所示。其中 m.jobID 是选中的值。为了在回发后保持价值，明智的做法是始终使用模型。

@Html.DropDownListFor(m => m.jobID, new SelectList(Model.Clients, "ID", "ClientName"),new { @class = "form-control" })