使用jquery ajax，如何发布包含其他对象列表的对象

本文关键字：对象 其他 列表 包含 何发布 jquery ajax 使用 | 更新日期: 2023-09-27 17:59:53

给定这些C#对象

class foo 
{
    int fooId {get; set;}
    string fooName {get;set;}
    List<bar> bars {get; set;}
}
class bar
{
    int barId {get; set;}
    string barName {get;set;}
}

和WebApi方法

[HttpPost]
public HttpResponseMessage AddFooBar(foo model)
{
    //...
}

假设我们有一个用户输入fooName和栏项列表的表单，那么序列化表单中的数据并将其提交给WebApi方法的最佳方式是什么？

使用jquery ajax，如何发布包含其他对象列表的对象

我强烈建议使用创建一个哑视图

<form id="f">
@Html.TextBoxFor(x=>x.foo);
@for(var i = 0; i<Model.foo.bars.Length; i++){
    @Html.TextBoxFor(x=>x.foo.bars[i]);
}
</form>
$(document).ready(function(){
    console.log($('#f').serialize());
});

所以你可以看到预期的结构。然后，您可以按照自己的意愿填写JSON

我找不到在一个ajax调用和一个WebApi控制器操作中发布foo和条列表的方法。最后，我发布了两个ajax帖子和两个控制器操作。两次旅行而不是一次，但它有效。以下是我的解决方案，以防有人发现它有用。

在html方面，我为表单使用了两个div，因为这是Asp.net网络表单，这意味着我们只能使用一个表单

<div id="foo-form">
    <input type="text" name="fooName" value="" />
    <button type="button" class="btn-cancel">Cancel</button>
    <button type="button" class="btn-submit">Submit</button>
</div>
<div id="bar-form">
    <input type="text" class="foobar" value="" />
    <input type="text" class="foobar" value="" />
    <input type="text" class="foobar" value="" />
    <input type="text" class="foobar" value="" />
</div>

Javascript端（带有Jquery ajax）

$("#foo-form .btn-submit").click(function (e) {
    e.preventDefault();
    fooBar.saveFoo();
});
var fooBar = new function () {
    //this posts foo
    this.saveFoo = function () {
        // serialize the form
        var serializedData = $("#foo-form :input").serialize();
        $.ajax({
            type: "POST",
            url: "/myapp/api/FooBar/AddFoo",
            data: serializedData,
            cache: false
        }).done(function (data) {
            if (data["Status"] === 'success') {
                //pass the id to the saveBars function
                fooBar.saveBars(data["Id"])
            }
            else {
                //handle logic error
            }
        }).fail(function (xhr, textStatus, errorThrown) {
            //handle ajax error
        }).always(function () {
            //something to do always
        });
    }

    //this posts bars
    this.saveBars = function (fooId) {
        //save all bars in array
        var arrBars = [];
        $('#bar-form .foobar').each(function () {
            arrBars.push(
                    {
                        "fooId": fooId,
                        "fooName": $(this).val()
                    }
                );
        });
        $.ajax({
            type: "POST",
            url: "/myapp/api/FooBar/AddBars",
            data: JSON.stringify(arrBars),
            cache: false,
            contentType: "application/json; charset=utf-8"
        }).done(function (data) {
            if (data["Status"] === 'success') {
                //show success message
            }
            else {
                //handle logic error
            }
        }).fail(function (xhr, textStatus, errorThrown) {
            //handle ajax error
        }).always(function () {
            //something to do always
        });
    }
}

现在在服务器端的webapi控制器C#代码

[HttpPost]
public HttpResponseMessage AddFoo(Foo model)
{
    try
    {
        //validate
        if (!ModelState.IsValid)
            return Request.CreateResponse(HttpStatusCode.OK, new { Status = "error", Message = "Error in foo"});
        //save foo
        var db = new FooBarDB();
        var id = db.AddFoo(model);
        //return new fooId
        return Request.CreateResponse(HttpStatusCode.OK, new { Status = "success", Id = id });
    }
    catch (Exception ex)
    {                
        return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex);
    }
}
[HttpPost]
public HttpResponseMessage AddBars(List<Bar> bars)
{
    try
    {
        //validate bars
        if (!this.ValidateBars(bars))
            return Request.CreateResponse(HttpStatusCode.OK, new { Status = "error", Message = "Errors in bars"});
        //save bars
        var db = new FooBarDB();
        db.AddBars(bars);
        //show success
        return Request.CreateResponse(HttpStatusCode.OK, new { Status = "success"});
    }
    catch (Exception ex)
    {
        return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, ex);
    }
}
private bool ValidateBars(List<Bar> bars)
{
    //logic to validate bars
}
相关文章：