代码之家 › 专栏 › 技术社区 › Helbo

Ajax更改下拉框选择的局部视图

asp.net-mvc ajax jquery c#

Helbo · 技术社区 · 6 年前

我知道什么是空引用。但我不明白为什么我会在这种情况下得到它。我有一个这样的主视图:

    @Html.DropDownListFor(model => model.contactSelectListItems, new List<SelectListItem>
    {
                        new SelectListItem() {Text = "option 1", Value="option 1"},
                        new SelectListItem() {Text = "option 2", Value="option 2"},
                        new SelectListItem() {Text = "option 3", Value="option 3"},
                         new SelectListItem() {Text = "option 4", Value="option 4"},
                        new SelectListItem() {Text = "option 5", Value="option 5"},
                         new SelectListItem() {Text = "option 6", Value="option 6"},
                        new SelectListItem() {Text = "option 7", Value="option 7"},
                         new SelectListItem() {Text = "option 8", Value="option 8"}
    }, "--Choose--", new { id = "subject" })
<div id="renderForms">
    @{ if (Model.SelectedParameter.Equals("option 7"))
        {
            Html.RenderPartial("_Bills", Model.contactBillsModel);
        }
    }
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#subject').on("change", function () {
            $.ajax({
                url: "/ContactUs/Index",
                type: "POST",
                data:  $(this).val(),
                async: true,
                success: function (data) {
                    if (data.status == "Success") {
                        alert("Done");
                    } else {
                        alert("Error occurs on the Database level!");
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("An error has occured!!! " + xhr.status + " && " + xhr.responseText );
                }
            });
        });
    });
</script>

这样的局部视图:

        @model Contact_Portal.Models.BillsModel


    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">
            <h4>BillsModel</h4>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group col-md-6">
                @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                </div>
            </div> ...etc
       </div>
}

像这样的控制器:

   // GET: ContactUs
        public ActionResult Index()
        {
            Models.ContactModel contactModel = new Models.ContactModel();
            contactModel.SelectedParameter = "--VÃ¦lg--";
            contactModel.contactBillsModel = new Models.BillsModel();
            return View(contactModel);
        }
        [HttpPost]
        public ActionResult Index(string searchValue)
        {

            Models.ContactModel contactModel = new Models.ContactModel();
            contactModel.contactBillsModel = new Models.BillsModel();
            contactModel.SelectedParameter = searchValue;


            return PartialView(contactModel);  
        }

但是,当我单击下拉框并选择一个值时,我不会将该值输入控制器,因此当控制器完成时,它包含一个空值而不是所选项目。我做错什么了?

1 回复 | 直到 6 年前

user3559349 6 年前

您没有正确发送数据。它必须是具有名称的对象 searchValue 以匹配方法中的参数。

$('#subject').on("change", function () {
    var selectedValue = $(this).val();
    $.ajax({
        url: '@Url.Action("Index", "ContactUs")', // don't hard code your urls
        type: "POST",
        data:  { searchValue: selectedValue },
        async: true,
        success: function (data) {
            ....