Question

我做了任何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属性。我通过下面的脚本尝试了这个，但我无法弄清楚如何从Key / Value数组进入我的模型。

<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）。脚本上的我的错误函数返回“错误：找不到”

Answer 1

Ajax没有找到控制器，因为你没有定义Ajax data:并给它正确的参数。所以反过来

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

这是您可以引用多个参数的方法

使用JQuery的MVC更新模型属性

1 个答案: