1

ボタンをクリックしたときにフィールドのセットをページに繰り返し追加するにはどうすればよいですか？ParentView.cshtmlに[レコードを追加]ボタンがあります

この[レコードの追加]ボタンをクリックすると、ParentViewに下記のかみそりビュー（childView.cshtml）を追加する必要があります。この[レコードの追加]ボタンをクリックするたびに、新しい空の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

組み込みの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>

次に、これを処理するアクションで、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 に答える
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 に答える