1

单击按钮时如何将一组字段重复添加到我的页面？我的 ParentView.cshtml 上有一个“添加记录”按钮

单击此“添加记录”按钮，我需要将下面提到的剃须刀视图（childView.cshtml）附加到我的 ParentView 上。每次单击此“添加记录”按钮时，我都需要新的空 ChildView.cshtml附加到我的父视图中。有人可以帮助我如何实现此功能吗？

ChildView.cshtml

<p>Record index 
@Html.EditorFor(model => model.Name)
@Html.EditorFor(model => model.Address)
@Html.EditorFor(model => model.Location)
<input type="submit" id="btnSave" value="Save" />

我的 ParentView.cshtml 如下所示

@model MyWebRole.ViewModels.MyViewModel
@{
    ViewBag.Title = "Address Book";
    Layout = "~/Views/Shared/_Layout.cshtml";

}
@using (Html.BeginForm())
{  

    <fieldset>
        <legend style="font-size: small;">Add Address records </legend>
        <br />
        <table>
            <tr>
                <td rowspan="5">
                    <img alt="" id="imageBox" src="" width="395" height="225" />
                </td>
                <td>
                    <span>Address Book </span>
                    <br />
                </td>
                <td>
                    @Html.EditorFor(model => model.REcordTitle)
                    @Html.ValidationMessageFor(model => model.REcordTitle)
                </td>
            </tr>
               ------------------------
               ------------------------

          </table>

          <div><input type="submit" id="btnAdd records" value="Add Records" /></div>
    </fieldset>
}
4

2 回答 2

0 
$('#btnAddRecords').click(function(){
$.getJSON("/MyController/AddRecord", null
    function (data) {
        $('#divToAddRecords').append(data);
    });
})

在控制器中：

public JsonResult AddRecord()
    {
        ...
        var res = SerializeControl("~/Views/Folder/ChildView.cshtml", viewModel);
        return Json(res, JsonRequestBehavior.AllowGet);
    }

private string SerializeControl()
    {
        var control = new RazorView(ControllerContext, controlPath, null, false, null);
        ViewData.Model = model;
        var writer = new HtmlTextWriter(new StringWriter());
        control.Render(new ViewContext(ControllerContext, control, ViewData, TempData, writer), writer);
        string value = writer.InnerWriter.ToString();
        return value;
    }

并更改以使添加记录的按钮不提交

于 2012-05-18T06:11:49.490 回答
0

您可以使用内置的 Ajax 助手吗？

@model MyWebRole.ViewModels.MyViewModel
@{
    ViewBag.Title = "Address Book";
    Layout = "~/Views/Shared/_Layout.cshtml";

}
@using (Ajax.BeginForm(new AjaxOptions() {
    UpdateTargetId = "RecordSection",
    InsertionMode = InsertionMode.InsertAfter,
}))
{  

<fieldset>
    <legend style="font-size: small;">Add Address records </legend>
    <br />
    <table>
        <tr>
            <td rowspan="5">
                <img alt="" id="imageBox" src="" width="395" height="225" />
            </td>
            <td>
                <span>Address Book </span>
                <br />
            </td>
            <td>
                @Html.EditorFor(model => model.REcordTitle)
                @Html.ValidationMessageFor(model => model.REcordTitle)
            </td>
        </tr>
           ------------------------
           ------------------------

      </table>

      <div><input type="submit" id="btnAdd records" value="Add Records" /></div>
</fieldset>
}

<div id="RecordSection">
    @* New Partial Views will be rendered here *@
</div>

然后在处理此问题的 Action 中，您可以使用 Get/Post/Redirect 设计模式在页面上放置一个新的 PartialView：

[HttpPost]
public ActionResult AddressBook(MyViewModel model)
{
    // do stuff with model, then pass an Id? 
    // to the Action which renders the partial view
    return RedirectToAction("AddRecord", new { id = model.Id });
}

public ActionResult AddRecord(int id)
{
    MyChildModel model = new MyChildModel();
    model.Id = id;
    return PartialView("_ChildView", model);
}
于 2012-05-18T08:56:29.377 回答