提交表单后,向表中添加新行。 -JQuery,Ajax

时间:2014-02-14 20:15:53

标签: jquery asp.net-mvc asp.net-ajax

我正在使用ajax.beginform并在我的Controller中调用json对象以在提交表单后呈现表单对象。我想插入一个新的表行来抓取数据库中的数据。这样做的正确方法是什么?我在jquery函数中需要帮助。这是我的代码。

查看

@using (Ajax.BeginForm("SubmitForm", "Controller", null, new AjaxOptions

        {
            HttpMethod = "POST",
            OnSuccess = "RenderObjectsAfterSubmit(data);"
        }))

{ 

<div>Request # <span id="ID"></span></div>
<div>
    @Html.Label("Name")
    <div>
        @Html.TextBoxFor(model => model.Name)
    </div>
</div>
<button type="submit" id="btnSubmit">Submit</button>

<table id="myTable">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Name</td>
            </tr>
        }
    </tbody>
</table> 
}

Jquery功能

function RenderObjectsAfterSubmit(data) {
    if (data != null && data.model != null) {
        $("#ID").html(data.model.Id);
        $("<tr><td>$('#Name').html(data.model.Name);</td> </tr>").insertAfter("#myTable");  **Here is where I need help.**
    }
    onSuccess(data, '', '#ajaxresult', '', '#btnSubmit');
}

控制器

public ActionResult SubmitForm(Model model)
{

if (ModelState.IsValid)
{
    try
    {
        return Json(new
        {
            success=true,
            model=model
        });
    }
}
}

3 个答案:

答案 0 :(得分:0)

试试这个。

$("<tr><td>"+$('#Name').text()+"</td> </tr>").appendTo("#myTable");

答案 1 :(得分:0)

在onsuccess函数中

尝试

$("#myTable").append("<tr><td>"+$('#Name').val()+"</td> </tr>");

答案 2 :(得分:0)

我不得不改变我做事的方式。我通过向OnSuccess函数添加Id来实现它。所以,它看起来像这样。

onSuccess(data,'#myTable','#ajaxresult','','#btnSubmit');