当我提交按钮时，下拉列表值为空？

Question

当我单击提交按钮时，具有下拉列表 country list 的表单将国家 ID 值传递给控制器​​。当我单击 F10 时，调用键盘按钮国家绑定方法。所以再次返回起点，以便再次国家值是Null 下面我附上屏幕截图：

<div class="page-content">
    <div class="container-fluid">
        <header class="section-header">
            <div class="tbl">
                <div class="tbl-row">
                    <div class="tbl-cell">
                        <h2>Company Registration Form</h2>
                    </div>
                </div>
            </div>
        </header>
        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            <section class="tabs-section">
                <div class="tabs-section-nav tabs-section-nav-icons">
                    <div class="tbl">
                        <ul class="nav" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" href="#tabs-1-tab-1" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <i class="font-icon font-icon-cogwheel"></i>
                                        Company Registration Form
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tabs-1-tab-2" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <span class="glyphicon glyphicon-music"></span>
                                        Company Social Network
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tabs-1-tab-3" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <i class="fa fa-product-hunt"></i>
                                        Company Reference
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div><!--.tabs-section-nav-->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active show" id="tabs-1-tab-1">
                        <br />
                        <br />
                        <section>
                            <div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => Model.company.CompanyName, new { @class = "form-label semibold control-label" })
                                            @Html.TextBoxFor(model => model.company.CompanyName, new { @class = "form-control", @id = "txtCompanyName", placeholder = "Enter the Company Name" })
                                            @Html.ValidationMessageFor(model => model.company.CompanyName)
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.ShortName, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.ShortName, new { @class = "form-control", @id = "txtShortName", placeholder = "Enter the Short Name" })
                                            @Html.ValidationMessageFor(model => model.company.ShortName)
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.Division, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.Division, new { @class = "form-control", @id = "txtDivision", placeholder = "Enter the Division" })
                                            @Html.ValidationMessageFor(model => model.company.Division)
                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                                <br />
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.Email, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.Email, new { @class = "form-control", @id = "txtEmail", placeholder = "Enter your Email" })
                                            @Html.ValidationMessageFor(model => model.company.Email)
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.Address1, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.Address1, new { @class = "form-control", @id = "txtAddress1", placeholder = "Enter your Address Line 1" })
                                            @Html.ValidationMessageFor(model => model.company.Address1)
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.Address2, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.Address2, new { @class = "form-control", @id = "txtAddress2", placeholder = "Enter your Address Line 2" })
                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                                <br />
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.Country, new { @class = "form-label semibold" })
                                            @Html.DropDownList("Country", null, "--- Select Country ---", new { @class = "select2-arrow" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.State, new { @class = "form-label semibold" })
                                            <select id="state" class="select2-arrow"></select>
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.City, new { @class = "form-label semibold" })
                                            <select id="city" class="select2-arrow"></select><br />

                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                                <br />
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.Pincode, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.Pincode, new { @class = "form-control", @id = "txtPincode", placeholder = "Enter your Pincode" })
                                            @Html.ValidationMessageFor(model => model.company.Pincode)
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.CountryCode, new { @class = "form-label semibold" })
                                            @*@Html.DropDownList("CountryCode", null, "---Select CountryCode---", new { @class = "select2-arrow" })*@
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.MobileNo, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.MobileNo, new { @class = "form-control", @id = "txtMobileNo", placeholder = "Enter your Mobile Number" })
                                            @Html.ValidationMessageFor(model => model.company.MobileNo)
                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                                <br />
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.PhoneNo, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.PhoneNo, new { @class = "form-control", @id = "txtPhoneNo", placeholder = "Enter your PhoneNo" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.PanNo, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.PanNo, new { @class = "form-control", @id = "txtPanNo", placeholder = "Enter Company PanNo" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.TinNo, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.TinNo, new { @class = "form-control", @id = "txtTinNo", placeholder = "Enter Company TinNo" })
                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                                <br />
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.GSTno, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.GSTno, new { @class = "form-control", @id = "txtGSTno", placeholder = "Enter Company GSTno" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.IECCode, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.IECCode, new { @class = "form-control", @id = "txtIECCode", placeholder = "Enter Company IECCode" })
                                        </fieldset>
                                    </div>

                                </div><!--.row-->
                                <br />
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Upload Company Logo</label>&nbsp;&nbsp;
                                            <input type="file" name="file" id="txtUploadImage" style="cursor:pointer;" />
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Perview Image</label>&nbsp;&nbsp;
                                            <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
                                            <a id="remove" onclick="javascript:ClearFileUploadControl();" style="display: none; cursor: pointer;">Remove</a>
                                        </fieldset>
                                    </div>
                                </div>
                                <br />
                                <input type="submit" name="Submit" id="SaveCompany" value="Save" class="btn btn-rounded btn-inline btn-success" />
                            </div>
                        </section>

                    </div><!--.tab-pane-->
                    <div role="tabpanel" class="tab-pane fade" id="tabs-1-tab-2">
                        <br />
                        <section>
                            <div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.CompanySocial.FaceBookID, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.CompanySocial.FaceBookID, new { @class = "form-control", @id = "txtFaceBookID", placeholder = "Enter the Facebook Link" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.CompanySocial.TwitterID, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.CompanySocial.TwitterID, new { @class = "form-control", @id = "txtTwitterID", placeholder = "Enter the Twitter Link" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.CompanySocial.linkedinID, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.CompanySocial.linkedinID, new { @class = "form-control", @id = "txtlinkedinID", placeholder = "Enter the Linkedin Link" })
                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                            </div>
                        </section>
                        <input type="submit" name="Submit" value="Previous" class="btn btn-rounded btn-inline btn-primary prev-step " />
                        <input type="submit" name="Submit" id="saveSocial" value="Next" class="btn btn-rounded btn-inline btn-success" />
                    </div><!--.tab-pane-->
                    <div role="tabpanel" class="tab-pane fade" id="tabs-1-tab-3">
                        Tab 3
                        <br />
                        <br />
                        <input type="submit" name="Submit" value="Previous" class="btn btn-rounded btn-inline btn-primary prev-step" />
                        <input type="submit" name="Submit" value="Finish" class="btn btn-rounded btn-inline btn-success" />
                    </div><!--.tab-pane-->
                </div><!--.tab-content-->
            </section><!--.tabs-section-->
        }
    </div>
</div>

脚本：

<script>
        function GetInfo() {
            var Company = {
                CompanyName: $("#txtCompanyName").val(), ShortName: $("#txtShortName").val(), Division: $("#txtDivision").val(), Email: $("#txtEmail").val(), Address1: $("#txtAddress1").val(), Address2: $("#txtAddress2").val(), Country: $("#Country").val(), State: $("#state").val(), City: $("#city").val(),
                Pincode: $("#txtPincode").val(), MobileNo: $("#txtMobileNo").val(), PhoneNo: $("#txtPhoneNo").val(), PanNo: $("#txtPanNo").val(), TinNo: $("#txtTinNo").val(), GSTno: $("#txtGSTno").val(), IECCode: $("#txtIECCode").val()
            };

            var mainModel = {};
            mainModel.Company = Company;

            $.ajax({
                type: "POST",
                url: "/Company/AddCompany",
                data: JSON.stringify(mainModel),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                }
            });
        }

        function OnSuccess(response) {
            alert(response.d);
        }

        $(document).ready(function () {
            $("#saveSocial").click(function (e) {
                e.preventDefault();
                GetInfo1();
            });

            $("#SaveCompany").click(function (e) {
                //e.preventDefault();
                GetInfo();
            });
        });


        function GetInfo1() {
            var Social = { FaceBookID: $("#txtFaceBookID").val(), TwitterID: $("#txtTwitterID").val(), linkedinID: $("#txtlinkedinID").val() };

            var mainModel = {};
            mainModel.CompanySocial = Social;

            $.ajax({
                type: "POST",
                url: "/Company/AddSocial",
                data: JSON.stringify(mainModel),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                }
            });
        }
    </script>

    <script>
        $(document).ready(function () {
            $("#Country").change(function () {
                var id = $(this).val();
                $("#state").empty();
                $.get("State_Bind", { CountryID: id }, function (data) {
                    var v = "<option>--- Select State ---</option>";
                    $.each(data, function (i, v1) {
                        v += "<option value=" + v1.Value + ">" + v1.Text + "</option>";
                    });
                    $("#state").html(v);
                });
            });

            $("#state").change(function () {
                var id = $(this).val();
                $("#city").empty();
                $.get("City_Bind", { StateID: id }, function (data) {
                    var v = "<option>--- Select City---</option>";
                    $.each(data, function (i, v1) {
                        v += "<option value=" + v1.Value + ">" + v1.Text + "</option>";
                    });
                    $("#city").html(v);
                });
            });
        });
    </script>

类值：

public int Country { get; set; }
        public int State { get; set; }
        public int City { get; set; }

屏幕截图：

动作结果：

[HttpPost]
        public ActionResult AddCompany(MainModel mainModel)
        {

            try
            {

                Country_Bind();

                if (ModelState.IsValid)
                {
                    dp obj = new dp();
                    if (obj.AddNewCompany(mainModel))
                    {
                        ViewBag.Message = "Company added successfully";
                    }
                }

                return View();
            }

            catch
            {
                return View();
            }

        }

国家代码：

public void Country_Bind()
        {
            DataSet ds = dblayer.Get_Country();
            List<SelectListItem> coutrylist = new List<SelectListItem>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                coutrylist.Add(new SelectListItem { Text = dr["CountryName"].ToString(), Value = dr["CountryID"].ToString() });
            }
            ViewBag.Country = coutrylist;
        }

Answer 1

您当前正在调用 Country_Bind() 方法作为 httppost 操作方法中的第一条语句。当您想在重新渲染相同的视图时重新渲染下拉列表时，您实际上需要这样做。

如果你不是在做 ajax 帖子，你应该关注PRG pattern。成功保存数据后，您应该重定向到呈现视图的 GET 操作方法。如果 Modelstate 验证失败，即您返回相同的视图（以便您可以向用户显示验证消息）并且您需要在此之前重新填充下拉数据。

当您执行重定向时，ViewData 无法传输消息。请改用TempData。

[HttpPost]
public ActionResult AddCompany(MainModel mainModel)
{    
    try
    {
       if (ModelState.IsValid)
       {
            dp obj = new dp();
            if (obj.AddNewCompany(mainModel))
            {
                TempData.Message = "Company added successfully";
                return RedirectToAction("CompanyList");
            }
       }
       // We need to repopulate the data needed for rendering dropdown
       Country_Bind();
       return View(mainModel);
   }
   catch(Exception ex)
   {
      // to do : Make sure to log the error
      return View("Error");
   }    
 }

在您的情况下，当您执行 ajax 发布返回重定向结果时没有意义。如果需要，您可以将 url 作为 json 响应的一部分返回到下一页，并在您的 ajax 调用 success/done 事件处理程序中使用它并做适当的事情（重定向到新页面/向用户显示消息）

[HttpPost]
public ActionResult AddCompany(MainModel mainModel)
{    
    try
    {
       if (ModelState.IsValid)
       {
            dp obj = new dp();
            if (obj.AddNewCompany(mainModel))
            {
                return Json(new { Message="Company added successfully"});
            }
       }          
       return Json(new { Message="Validation errors!"});
   }
   catch(Exception ex)
   {
       // must log the exception
       return Json(new { Message="Error "});
   }    
 }

确保更新您的 ajax 调用的成功/完成事件处理程序以读取响应（json 并执行诸如向用户显示消息/隐藏或显示下一个选项卡之类的操作）

我还注意到您的 ajaxifying 代码存在问题。由于您正在进行 ajax 表单提交，因此您应该通过调用 event.preventDefault 方法来防止默认的表单提交行为。

$("#SaveCompany").click(function (e) {
    e.preventDefault();
    GetInfo();
});

我还建议使用特定于视图的平面视图模型。所以你的属性不会是嵌套级别，当你使用辅助方法（TextBoxFor etx）时，它会生成正确的输入字段名称，你不需要手动构建你想要发送的 Js 对象 .您可以简单地在表单对象上使用 jquery serialize() 方法并将其作为 ajax 调用的数据发送。