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

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; }
}

当我添加创建视图时，代码是：

    <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>

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

谢谢

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);
}

返回部分_Create 视图

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