C# MVC使用JQuery更新模型属性

我已经有一段时间没有做任何MVC/JQuery了。我正在寻找一个解决方案或更好的方法来实现这一点

为了简化，我有一个具有以下属性的模型：

public IEnumerable<XmlInputFieldModel> XmlFields { get; set; }
public IEnumerable<string> BusinessObjectFields { get; set; }
public IEnumerable<XmlSchemaField> MappedFields { get; set; }

public class XmlInputFieldModel
{
    public string XmlElement { get; set;}

    public string XmlValue { get; set; }
}

public class XmlSchemaField
{
    public string XmlElement { get; set; }

    public string BusinessObjectField { get; set; }
}

在我看来，我提供了XmlField元素及其值的列表，对于每个XmlField，我都有一个下拉列表来选择BusinessObjectField，如下所示：

@foreach(var item in Model.XmlFields)
{
    <div>
        <div style="width: 300px; display: inline-block;">
            @Html.DisplayFor(i => item.XmlElement)
        </div>
        <div style="width: 300px; display: inline-block;">
            @Html.DisplayFor(i => item.XmlValue)
        </div>
        <div class="busoblist" data-elementid="@(item.XmlElement)" style="display: inline-block;">
            @Html.DropDownListFor(m => m.BusinessObjectFields, new SelectList(Model.BusinessObjectFields, item.XmlElement))
        </div>
        <hr />
    </div>
}

<div style="width: 200px; display: inline-block;">
    <input type="button" name="Save" id="Save" />
</div>

单击“保存”时，我希望使用给定元素的值和所选下拉字段值填充MappedFields属性。我已经通过下面的脚本尝试了这一点，但是我不知道如何从键/值数组进入我的模型

<script type="text/javascript">
    $(document).ready(function () {
        $("#Save").on("click", function () {

            var mappedFields = new Array();
            $('.busoblist').each(function() {
                var element = $(this).attr('data-elementid');
                mappedFields.push(element + ' : ' + $("option:selected", this).text() + ',');
            });

            var dataToSend = { Val: "Working" };

            $.ajax({
                url: "Home/SetMappedFields",
                type: "POST",
                data: dataToSend,
                error: function(error) {
                    alert("Error: " + error.statusText);
                },
                success: function(result) {
                    alert("Result: " + result.statusText);
                }
            });
        });
    });
</script>

[HttpPost]
public ActionResult SetMappedFields(string Val)
{
    string newVal = Val;
    return this.RedirectToAction(x => x.Index());
}

我研究了Ajax路由注释代码，但似乎无法找到控制器操作。上面的视图和脚本位于局部视图中，其中填充了基础模型的其他属性

---

@CSharper-我已经更新了上面的代码，但它仍然没有击中控制器：我正在使用启动MVC4应用程序的默认HomeController。脚本上的My Error函数返回错误：Not Found。

Ajax找不到控制器，因为您没有定义Ajax数据：并为其提供正确的参数。那么反过来呢

url:Home/SetMappedFields+？model=+model+&fields=+mappedFields， 这是不对的。如果您想从地址栏或使用window.open调用该方法，则可以这样做，但ajax对参数的期望不同

在您想要触发Ajax调用的事件内部

var dataToSend = {
        Val : "Working"
    };

    $.ajax({
        url: "/Home/AjaxCall",
        type: "POST",
        data: dataToSend,
        success: function (result) {

        },
    });
})

    [HttpPost]
    public ActionResult AjaxCall(string Val)
    {
        return View("Index");
    }


var dataToSend = {
            param1: value,
            param2: value
        };

---

这就是如何引用多个参数的方法

Hi@CSharper，我刚刚尝试了上面的Ajax调用，但仍然没有找到它。[HttpPost]公共操作结果SetMappedFieldsXmlSchemaModel模型，Array fieldsOk这是因为它需要一个完整的模型类和一个数组。帮我一个忙，删除复杂的参数，用一个简单的字符串替换，然后硬编码dataToSend参数，这样我们就可以看到它工作了。我只是用一个字符串尝试了它，但它仍然无法到达控制器。它在局部视图中是否正常工作？它是否在局部视图中并不重要。您引用JQuery是否正确？我已经标记了您的答案，因为您是最有帮助的。不过，我已经完全重写了所有内容，以大大简化它并使用编辑器模板。