0

嗨，今天的问候！

(1) 绑定到视图的视图模型（MyViewModel.cs）如下...

public class MyViewModel
{    
   public int ParentId { get; set; }  //property1       
   List<Item> ItemList {get; set;}   //property2

   public MyViewModel()   //Constructor
   {
     ItemList=new List<Item>();  //creating an empty list of items
   }
}

(2) 我正在通过 ajax 回发（来自 MyView.cshtml 视图）调用一个操作方法，如下所示。

function AddItem() {
    var form = $('#MyForm');
    var serializedform = form.serialize();
    $.ajax({
        type: 'POST',
        url: '@Url.Content("~/MyArea/MyController/AddItem")',
        cache: false,
        data: serializedform,
        success: function (html) {$('#MyForm').html(html);}
    });
}

下面的按钮单击将调用 ajax 回发...

<input type="button" value="Add" class="Previousbtn" onclick="AddItem()" />

(3) 我在（MyController.cs 控制器）中有一个动作方法，如下所示......

public ActionResult AddItem(MyViewModel ViewModel)
{
   ViewModel.ItemList.Add(new Item());
   return View("MyView", ViewModel);
}

现在的问题是，从动作返回后，视图模型中没有数据。但我能够获得第三次回发的数据！你能建议解决方案吗..

视图中的完整表单代码如下...

    @model MyViewModel

    <script type="text/javascript" language="javascript">
        function AddItem() {
            var form = $('#MyForm');
            var serializedform = form.serialize();
            $.ajax({
                type: 'POST',
                url: '@Url.Content("~/MyArea/MyController/AddItem")',
                cache: false,
                data: serializedform,
                success: function (html) {
                    $('#MyForm').html(html);
                }
            });
        }

        function RemoveItem() {
            var form = $('#MyForm');
            var serializedform = form.serialize();
            $.ajax({
                type: 'POST',
                url: '@Url.Content("~/MyArea/MyController/RemoveItem")',
                cache: false,
                data: serializedform,
                success: function (html) {
                    $('#MyForm').html(html);
                }
            });
        }

     function SaveItems() {    
        var form = $('#MyForm');
        var serializedform = forModel.serialize();
        $.ajax({
            type: 'POST',
            url: '@Url.Content("~/MyArea/MyController/SaveItems")',
            cache: false,
            data: serializedform,
            success: function (html) {
                $('#MyForm').html(html);
            }
        });
    }

    </script>
    @using (Html.BeginForm("SaveItems", "MyController", FormMethod.Post, new { id = "MyForm" }))
    {    
        @Html.HiddenFor(m => Model.ParentId)
        <div>
             <input type="button" value="Save" onclick="SaveItems()" />
        </div>
        <div>
            <table>
                <tr>
                    <td style="width: 48%;">
                        <div style="height: 500px; width: 100%; overflow: auto">
                            <table>
                                <thead>
                                    <tr>
                                        <th style="width: 80%;">
                                            Item
                                        </th>
                                        <th style="width: 10%">
                                            Select
                                        </th>
                                    </tr>
                                </thead>
                                @for (int i = 0; i < Model.ItemList.Count; i++)
                                {
                                    @Html.HiddenFor(m => Model.ItemList[i].ItemId)                                
                                    @Html.HiddenFor(m => Model.ItemList[i].ItemName)                                
                                    <tr>
                                        @if (Model.ItemList[i].ItemId > 0)
                                        {

                                            <td style="width: 80%; background-color:gray;">
                                                @Html.DisplayFor(m => Model.ItemList[i].ItemName)
                                            </td>
                                            <td style="width: 10%; background-color:gray;">
                                                <img src="@Url.Content("~/Images/tick.png")" alt="Added"/>
                                                @Html.HiddenFor(m => Model.ItemList[i].IsSelected)
                                            </td>
                                        }
                                        else
                                        {                            
                                            <td style="width: 80%;">
                                                @Html.DisplayFor(m => Model.ItemList[i].ItemName)
                                            </td>
                                            <td style="width: 10%">
                                                @if ((Model.ItemList[i].IsSelected != null) && (Model.ItemList[i].IsSelected != false))
                                                {
                                                    <img src="@Url.Content("~/Images/tick.png")" alt="Added"/>                                            
                                                }
                                                else
                                                {
                                                    @Html.CheckBoxFor(m => Model.ItemList[i].IsSelected, new { @style = "cursor:pointer" })
                                                }
                                            </td>
                                        }
                                    </tr>
                                }
                            </table>
                        </div>
                    </td>
                    <td style="width: 4%; vertical-align: middle">
                        <input type="button" value="Add" onclick="AddItem()" />
                        <input type="button" value="Remove" onclick="RemoveItem()" />
                    </td>                
                </tr>
            </table>
        </div>    
    }
4

3 回答 3

1

您必须返回 PartialViewResult 然后您可以执行类似的操作

$.post('/controller/GetMyPartial',function(html){
$('elem').html(html);});

    [HttpPost]
    public PartialViewResult GetMyPartial(string id
    {


        return PartialView('view.cshtml',Model);
    }
于 2012-10-03T20:17:50.260 回答
0

在我的项目中，我使用这样的 json 获取带有国家 ID 的状态数据

在我看来

 <script type="text/javascript">
        function cascadingdropdown() {           
            var countryID = $('#countryID').val();
            $.ajax({
                url: "/City/State",
                dataType: 'json',
                data: { countryId: countryID },
                success: function (data) {
                    alert(data);
                    $("#stateID").empty();
                    $("#stateID").append("<option value='0'>--Select State--</option>");
                    $.each(data, function (index, optiondata) {
                        alert(optiondata.StateName);
                        $("#stateID").append("<option value='" + optiondata.ID + "'>" + optiondata.StateName + "</option>");
                    });
                },
                error: function () {
                    alert('Faild To Retrieve states.');
                }

            });
        } 
    </script>

在我的控制器中以 json 格式返回数据

public JsonResult State(int countryId)
        {           
            var stateList = CityRepository.GetList(countryId);
            return Json(stateList, JsonRequestBehavior.AllowGet);
        }

我想这会对你有所帮助....

于 2012-10-03T12:17:12.147 回答
0

我解决了以下问题...

问题：

我在这里显示的表单代码实际上是另一个视图页面的一部分，该页面也包含一个表单。所以，当我在运行时看到页面源时，有两个表单标签：一个在另一个里面，浏览器忽略了内部表单标签。

解决方案：

在父视图页面中，早些时候我使用 Html.Partial 通过将模型传递给它来呈现这个视图。

@using(Html.BeginForm())
{
---
---
@Html.Partial('/MyArea/Views/MyView',MyViewModel)
---
---
}

但是现在，我添加了一个没有内容的 div。单击按钮时，我正在调用一个操作方法（通过 ajax 回发），然后将上面显示的视图页面（MyView.cshmtl）呈现到这个空的 div 中。

    @using(Html.BeginForm())
    {
    ---
    ---
    <div id="divMyView" style="display:none"></div>
    ---
    ---
    }

该操作返回一个单独的视图，该视图加载到上述 div 中。由于它是具有自己的表单标签的单独视图，因此我能够在每次回发时发送和接收数据。

谢谢大家对此的建议：）

于 2012-10-09T08:32:07.290 回答