MVC2：在创建上下文中可以渲染 List<object> 吗？

Question

我有这个模型：

public class Package
{
    public string CustomerName { get; set; }
    public List<Product> Products { get; set; }
}

public class Product
{
    public int Quantity { get; set; }
    public string Name { get; set; }
}

当我添加 Create 的视图时，代码是：

    <fieldset>
        <legend>Fields</legend>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.CustomerName) %>
        </div>
        <div class="editor-field">
            <%: Html.TextBoxFor(model => model.CustomerName) %>
            <%: Html.ValidationMessageFor(model => model.CustomerName) %>
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>

如何管理产品列表？ 我可以获得按钮或其他东西来创建新产品并将其添加到 Products 列表中吗？

谢谢

Answer 1

对于创建按钮，您也可以使用 HTML.ActionLink() 或 Ajax.ActionLink() 定义为按钮，例如：

<% Response.Write(Html.ActionLink("Add Product", "Create", new { id = tId, tNum = tNum }, new { @class = "oldVal" })); %>

它会在你的页面上创建一个按钮，在这里你可以看到不同的属性（所以只要检查一下你会发现它很有用）......并且从这两者中使用哪个更多取决于你想要的行动...

在你的控制器中：

public ActionResult Create() 
{
    // do same as mentioned by [gnome][1]
}

这里是示例：模态弹出窗口，声明为页面的部分视图 [使用 Ajax.ActionLink() 的部分视图]

using (Ajax.BeginForm("Login", "Users", null, new AjaxOptions() { UpdateTargetId = "divLoginPopupContent" }))
            {
                Response.Write(Html.ValidationSummary(true));
    %>
                <ul class="chooseQuestion">
                    <li>
                        <div class="short">
                            <%= Html.LabelFor(model => model.LoginEmail)%>
                        </div>
                        <div class="editor-field">
                            <%= Html.TextBoxFor(model => model.LoginEmail)%>
                            <%= Html.ValidationMessageFor(model => model.LoginEmail)%>
                        </div>
                    </li><li>
                        <div class="short">
                            <%= Html.LabelFor(model => model.LoginPassword)%>
                        </div>
                        <div class="editor-field">
                            <%= Html.PasswordFor(model => model.LoginPassword)%>
                            <%= Html.ValidationMessageFor(model => model.LoginPassword)%>
                        </div>
                    </li><li>
                        <div class="checkbox">                
                            <%= Html.CheckBoxFor(model => model.Remember)%>
                            <%= Html.LabelFor(model => model.Remember)%>
                        </div>
                    </li><li>
                        <input type="submit" class="button" value="Login" id="btnLoginSubmit" />
                        <div id="divlogin_ajaxloading" style="display:none; vertical-align:top; text-align:center;"><img alt="" src="/images/ajax-loader.gif" /></div>
                    </li>
                </ul> 
            }

您的局部视图操作：

public ActionResult Login(LoginModel model)
        {
            if (ModelState.IsValid)
            {
                if (Membership.ValidateUser(model.LoginEmail, model.LoginPassword))
                {
                    return Redirect("/MyPage");
                }
                else
                {
                    ModelState.Clear();
                    return PartialView("LoginPopup", new LoginModel());
                }
            }
        }

Answer 2

刚刚输入此内容，尚未对其进行测试，但基本想法是在客户视图中列出您的产品，并使用按钮为客户添加新产品。

为客户列出产品：

<table>
    <% foreach(var p in Customer.Products) { %>
    <tr>
        <td><%: p.Quantity %></td>
        <td><%: p.Name %></td>
    </tr>
    <% } %>
</table>
<p><%: Html.ActionLink("Add Product", "Create", new { controller = 'Products' }, new { id = 'addProduct'}) %>

<div id="dialog"></div>

要为客户添加新产品，您可以使用 jQuery UI 显示对话框；只需传递客户 ID

// 假设你已经包含了 jquery-ui

<script type="text/javascript">
$(document).ready(function() {
    $('#dialog').dialog({ 
        autoOpen : false,
        button : { 
            'Save' : function() {
                $.ajax({
                    url : $('#addProduct').attr('href'),
                    type : 'get'
                    success : function() { 
                        alert('Product added!');
                    }
                });
            }, 
            'Cancel' : function() {
                $('#dialog').dialog('close');
            }
        }
    });

    $('#addProduct').click(function() {
        var customerId = $('#CustomerId').val();
        $('#dialog').dialog('open');
        $('#Customer_Product_Id').val(customerId); // assuming there's a hidden field on the form
    });
});
</script>

在您的产品控制器中返回一个部分

public ActionResult Create() 
{
    List<Product> products = new List<Product>() { 
        new Product() { Id = 1, Name = "Rice" },
        new Product() { Id = 2, Name = 'Corn' }};
    ViewData.Add("Products", new SelectList(products, "Id", "Name", ""));
    Product product = new Product();
    if (Request.IsAjaxRequest()) 
    {
        return PartailView("_CreateOrEdit", product)
    }

    return View("Create", product);
}

_创建视图

<%: Html.TextBoxFor(model => model.Quantity) %>
<%: Html.DropDownList("Products") %>
<%: Html.HiddenFieldFor(model => model.Product.Customer.Id) %>