0

假设我们有一个编辑表单来创建一个新用户。现在保存按钮被放置在不同的部分，页脚。

我的问题是我无法在一个表单中获取编辑字段和保存按钮，因为该按钮位于不同的部分。

因此，我无法提交表单。

解决这个问题的最佳方法是什么？

_Layout.cshtml

<div class="content">
    @RenderBody()
</div>
<div class="footer">
    @RenderSection("Footer")
</div>

索引.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Footer
{
    <input type="submit" value="Save" />
}

@using(Html.BeginForm())
{
    <h2>New User</h2>
    @Html.EditorForModel()
}
4

3 回答 3

2

您可以form.Dispose()显式调用，而不是using语句：

@{ var form = Html.BeginForm() }

<h2>New User</h2>
@Html.EditorForModel()

@section Footer
{
    <input type="submit" value="Save" />
    @{ form.Dispose(); }
}

编辑

但是您至少必须确保 Body 和 Footer 部分在同一个容器中，例如：

<div class="content">
    @RenderBody()
    <div class="footer">
        @RenderSection("Footer")
    </div>
</div>

使用问题中所写的布局，contentdiv（以及form标签）必须在submit按钮出现之前关闭。这不可能在逻辑上起作用：

<div class="content">
    @RenderBody()               @@ form opens, and therefore must close here
</div>
<div class="footer">
    @RenderSection("Footer")    @@ submit button is here -- can never be inside the form
</div>

抛开编辑不谈： 将表单拆分为多个局部视图似乎是一个非常糟糕的主意。你可能会称之为代码异味——如果可能的话，我会尽量避免它。

于 2012-12-14T08:57:13.683 回答
1

你发现了一个非常尴尬的工作。我建议这样做：

  • 为了区分单击的不同按钮的操作，请在模型中创建一个新属性：public string Action { get; set; }
  • 给你一个 id 并为你的新模型属性包含一个隐藏的输入。
<form id="my-form">
    @Html.HiddenFor(x => x.Action)
    ...
</form>
  • 在页脚中创建具有相同类但值不同的按钮：
<button class="btn-submit" value="action1">Submit</button>
<button class="btn-submit" value="action2">Submit</button>
  • 使用以下 JavaScript：
$('.btn-submit').live('click', function() {
    // update value of hidden input inside the form
    $('#Action').val($(this.val()));
    // submit the form
    $('#my-form').submit();
});
  • 在您的 ActionResult 中，根据 Action 属性的值执行不同的操作：
public ActionResult WahteverAction(WhateverModel model)
{
    if(ModelState.IsValid)
    {
        if(model.Action == "action1")
        {
            // do whatever needs to be done for action1
        }
        if(model.Action == "action2")
        {
            // do whatever needs to be done for action2
        }
    }
    return View();
}
于 2012-12-18T17:19:28.773 回答
0

我找到了解决我的问题的方法。这不是很好，但它有效。

我用锚点替换了提交按钮。单击锚点时，将调用一个 javascript 函数。

<a name="save" onclick="submitAction(this)"></a>

javascript 函数在表单中创建一个隐藏的提交按钮并单击它。

function submitAction(sender) {
    var action = $(sender).attr('name');
    $('form').append('<input type="submit" style="display:none" id="tmpSubmit" />');
    $('#tmpSubmit').attr('name', action);
    $('#tmpSubmit').click();
}
于 2012-12-18T16:50:44.253 回答