MVC2: Is rendering List<object> possible in Create context? - asp.net

Question

I have this Model:
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; }
}
When I add the Create's view, the code is:
<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>
How manage the Products list?
Can I get a button or something to create a new product and add it to the Products list?
Thank you

Answer 1

for creating buttn you can also do this use HTML.ActionLink() or Ajax.ActionLink() defined as a button like:
<% Response.Write(Html.ActionLink("Add Product", "Create", new { id = tId, tNum = tNum }, new { #class = "oldVal" })); %>
it'll create a button on your page, and here you can see different attributes (so just check them out you'll find it useful) ... and from both of this which to use is more depends upon your desired action ...
and in your controller:
public ActionResult Create()
{
// do same as mentioned by [gnome][1]
}
here is the example: modal popup, declared as a partial view of page
[partial view using 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>
}
your partial view action:
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

Just typed this up, haven't tested it but the basic idea is to list your products on the customer view with a button to add a new product for a customer.
To list Products for Customer:
<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>
To add a new Product for a customer you could use jQuery UI to show a dialog; just pass the Customer Id
// assuming you've included 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>
In your product controller return a partial
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 view
<%: Html.TextBoxFor(model => model.Quantity) %>
<%: Html.DropDownList("Products") %>
<%: Html.HiddenFieldFor(model => model.Product.Customer.Id) %>