Question

我有一个包含表单的View。该表单有一个select字段，我根据之前的选择填充AJAX调用。在该字段旁边，我有一个Add按钮，可以打开一个modal，其中包含需要添加的对象的Partial view。

这几乎是我迷路的地方。如果我单击Add按钮，我会被重定向到只包含部分视图的页面。

如果调用成功，我想调用一个函数，我在OnSuccess中设置AjaxOptions参数，但该函数需要一些参数。我写了一个解决方法，以防参数为null，但有没有办法用函数调用wthe函数？

这是包含div和select

的button

<div class="form-group" id="divItem">
    <div class="col-md-4 text-right">
        <button class="btn btn-primary btn-xs" data-target="#itemModal" data-toggle="modal" type="button" id="itemModalButton">
            <span aria-hidden="true" class="glyphicon glyphicon-plus"></span>
        </button>
        &nbsp;@Html.LabelFor(x => x.Title, new {@class = "control-label"})
    </div>
    <div class="col-md-8" id="itemField">
        <script id="itemTemplate" type="text/template">
            <select class="form-control" id="ItemId" {{^.}}disabled{{/.}}>
                {{#.}}
                <option value="{{Id}}">{{Title}} - {{Description}}</option>
                {{/.}}
            </select>
        </script>
    </div>
</div>

模态非常简单：

<div class="fade modal" id="itemModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" id="itemModalBody">
            </div>
        </div>
    </div>
</div>

这是我加载Partial view的方式，具体取决于之前选择的选择：

$itemModalButton.click(function() {
    $itemModalBody.load("/Api/Item/New/" + $topItem.val());
});

部分视图：

@model Item
@{
    Layout = null;
}

@using (Ajax.BeginForm("New", "Item", new AjaxOptions {HttpMethod = "POST", OnSuccess = "getItems"}))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(x => x.TopItemId)
    <div class="form-horizontal">
        <h4>New item</h4>
        <hr/>
        @Html.ValidationSummary(true, "", new {@class = "text-danger"})
        <div class="form-group">
            @Html.LabelFor(model => model.Title, new {@class = "control-label col-md-2"})
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new {htmlAttributes = new {@class = "form-control"}})
                @Html.ValidationMessageFor(model => model.Tite, "", new {@class = "text-danger"})
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Description, new {@class = "control-label col-md-2"})
            <div class="col-md-10">
                @Html.EditorFor(model => model.Description, new {htmlAttributes = new {@class = "form-control"}})
                @Html.ValidationMessageFor(model => model.Description, "", new {@class = "text-danger"})
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-10 col-md-offset-2">
                <input class="btn btn-default" type="submit" value="Create"/>
            </div>
        </div>
    </div>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")   
}

POST行动：

[HttpPost]
public async Task<ActionResult> Novo([Bind(Include = "TopItemId,Title,Description")] Item model)
{
    if (!ModelState.IsValid)
    {
        return PartialView(model);
    }
    _db.Items.Add(item);     
    await _db.SaveChangesAsync();
    return Json(await _db.Items.Where(x => x.TopItemId == model.TopItemId).ToListAsync());
}

这几乎就是所有的代码。我知道我错过了一些东西而且我知道我做错了什么，但想到了什么。

Answer 1

最后，我做了不同的出价，Tieson T.帮了很多（谢谢:)）

从部分视图开始，除了using语句外，一切都是一样的：

@using (Html.BeginForm(null, null, FormMethod.Post, new {id = "partialViewForm"}))

我在页面加载时渲染视图，因此模态的HTML现在看起来像这样：

<div class="fade modal" id="itemModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                @{
                    Html.RenderAction("New", "Item");
                }
            </div>
        </div>
    </div>
</div>

由于HTML已经呈现，我不需要将TopItemId发送到控制器，我只需要在单击Add按钮时将其设置为隐藏字段。所以javascript就是这样的：

$itemModalButton.click(function() {
    $("#partialViewForm").find("#TopItemId").val($topItem.val());
});

我发布这样的表格：

$partialViewForm.submit(function (event) {
    event.preventDefault();
    $.validator.unobtrusive.parse($partialViewForm);
    if ($partialViewForm.valid()) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("Novo", "Subkonto")',
            data: $partialViewForm.serialize(),
            success: function (result) {
                // handle the result    
            },
            error: function (xhr, ajaxOptions, thrownError) {
                // handle the error
            }
        });
    }
});

Answer 2

如果没有准确看到你的标记是什么样的，我只是猜测，但听起来好像提交了一个表单，或者当你这样做时正在激活超链接：

$itemModalButton.click(function() {
    $itemModalBody.load("/Api/Item/New/" + $topItem.val());
});

要修复它，请添加event参数，然后使用它来取消按钮的默认行为：

$itemModalButton.click(function(e) {
    e.preventDefault();

    $itemModalBody.load("/Api/Item/New/" + $topItem.val());
});

在模态中添加项目并更新选择

2 个答案: