Ajax изменить частичное представление при выборе выпадающего списка

Question

Я знаю, что такое нулевая ссылка.но я не могу понять, почему я получаю это в этом сценарии.У меня есть главный вид, подобный этому:

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

однако этоКажется, что когда я нажимаю на раскрывающийся список и выбираю значение, я не получаю значение в контроллер, поэтому, когда контроллер завершает работу, он содержит нулевое значение вместо выбранного элемента.Что я делаю неправильно ?

Answer 1

Вы отправляете данные неправильно.Это должен быть объект с именем 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) {
            ....