0

この質問は以前に尋ねられましたが、私がレビューしたものでは明確または完全な解決策はありません. ここで私を助けてくれることを願っています。
AjaxHelper を使用して、クライアントから入力されたデータ (入力テキスト フィールド) をサーバーに渡したいと考えています。より洗練された解決策がある場合は、私のサンプルに関連するコードで応答してください。
また、Ajax.BeginForm() を使用してみましたが、成功しませんでした。ここには 2 つのボタンがあることに注意してください。ユーザーが入力フィールドの下に入力した内容を動的に追加するもの。2 番目のボタンは、コントローラーへの単純な非 ajax ポストです。
アイテムは、Ajax.ActionLink() と部分ビュー "_NewRow.cshtml" を使用して動的に追加され、マークアップを定義します。

これが私のIndex.cshtmlです：

@model MyAccount
@using (Html.BeginForm())
{
    @Html.ValidationSummary(excludePropertyErrors: true)
<fieldset>
    <div class="form-element cf">
        <div class="form-label">
            <span>Approvers:</span>
        </div>
        <div class="form-input cf">
            @Html.TextBox("accountName", string.Empty, new { @class = "input-search-person" })
            @Ajax.ActionLink("Add", "AddRecipient", "Test",
                new
                {
                    accountName = "Value from Input here."
                },
                new AjaxOptions
                {
                    UpdateTargetId = "recipientList",
                    HttpMethod = "POST",
                    InsertionMode = InsertionMode.InsertAfter
                })
            <div style="display: block; margin-top: 5px">
                <div id="recipientList">
                </div>
            </div>
        </div>
    </div>
</fieldset>
<input type="submit" class="btn green rounded" id="Submit" name="Submit" value="Submit" />
}

これが私のTestController.csです：

public class TestController : Controller
{
    public PartialViewResult AddRecipient(string accountName)
    {
        MyAccount acct = new MyAccount();
        acct.LastName = accountName;
        acct.Email = "some email";
        return PartialView("_NewRow", acct);
    }

    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(IEnumerable<string> accountList, string accountName)
    {
        if (Request.IsAjaxRequest())
        {
            MyAccount acct = new MyAccount();
            acct.LastName = accountName;
            acct.Email = "some email";
            return PartialView("_NewRow", accountName);
        }

        if (ModelState.IsValid)
        {
            RedirectToAction("AnotherAction", "AnotherController");
        }

        return View();
    }

}

ここに私の部分的なビュー "_NewRow.cshtml" があります:

@model MyAccount
@using (Html.BeginCollectionItem("recipients"))
{
    @Html.HiddenFor(model => model.LastName)
    @Html.HiddenFor(model => model.Email)
<span>@Model.LastName<span>(@Model.Email)</span></span>
}

そして、これが私の単純なモデル MyAccount.cs です。

[Serializable]
[DataContract]
public class MyAccount
{
    [DataMember]
    public virtual string LastName { get; set; }
    [DataMember]
    public virtual string Email { get; set; }
}

どうぞよろしくお願いいたします。ありがとうございました！

4

2 に答える 2

1

アクション リンクを通常の html ボタンに変更する

<button type="button" id="textButton">Add</button>

次に、少しのjQueryで完了です

$('#textButton').click(function(){
    var recipName = $('.input-search-person').val();

    $.post('/Test/AddRecipient', 
           { accountName: recipName}, 
           function(data){
                $('#recipientList').append(data);
            });

});
于 2012-04-28T04:22:26.140 に答える