Model Binding issue - asp.net-mvc

Using Asp.net MVC, I have one view that's strongly bind to "List" , and loop to partial render a partial view as following
<%
foreach (var q in Model)
{
Html.RenderPartial("Question", q);
}
%>
and this partial view strongly bind to "Question"
<%
foreach (var option in Model.Options)
{
%>
<p/>
<%=Html.RadioButton(option.QuestionId.ToString(), (option.IsSelected) )%> <%= option.OptionBody%>
<%
}
}
%>
Do a post back in the master view as following
<% Html.BeginForm("Submit", "Questionnaire", FormMethod.Post); %>
<input type="submit" name="submit" value="submit" />
<% Html.EndForm(); %>
Finally at my controller
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Submit(List<Question> test)
{
var x = test;
return View("Submit");
}
My Form is
<% Html.BeginForm(); %>
<%:"UserName : "%>
<%=ViewData["UserName"]%>
<%=Html.TextBox("test",ViewData["tt"])%>
<p />
<%:"Phone Number :"%>
<%=ViewData["PhoneNumber"]%>
<p />
<%
foreach (var q in Model)
{
Html.RenderPartial("Question", q);
}
%>
<% Html.EndForm(); %>
<% Html.BeginForm("Submit", "Questionnaire", FormMethod.Post); %>
<% TempData["form"] = ViewData;%>
<input type="submit" name="submit" value="submit" />
<% Html.EndForm(); %>
and when I include all in one begin form, post back dosn't fire"
My Question is
Why x is always null?
and how can I get my updated model ( having user selection to the radio button rendered in the partial view )
Should I use TempData to store my value? and how ?
After receiving the right updated model, i will save it to DB.
Thanks!

<% Html.BeginForm("Submit", "Questionnaire", FormMethod.Post); %>
<input type="submit" name="submit" value="submit" />
<% Html.EndForm(); %>
It looks to me like your form only has a single input inside of it. You need to render your editors inside the form, or they will not get included as part of the POST.
Update
So now you've got two forms: one has the inputs you want to submit and the other one has the actual button. The problem is, clicking the submit button on the second one will only submit the second (practically empty) form. Why not combine your forms?
<% Html.BeginForm("Submit", "Questionnaire", FormMethod.Post); %>
<%=ViewData["UserName"]%>
<%=Html.TextBox("test",ViewData["tt"])%>
<p />
<%:"Phone Number :"%>
<%=ViewData["PhoneNumber"]%>
<p />
<%
foreach (var q in Model)
{
Html.RenderPartial("Question", q);
}
%>
<input type="submit" name="submit" value="submit" />
<% Html.EndForm(); %>

Related

ASP.NET MVC - Ajax.BeginForm vs Ajax.ActionLink

I've noticed when I use Ajax.BeginForm (with a submit button) that the Model is passed to the Controller but when I use an Ajax.ActionLink it is not passed - or at least I have not discovered how to tap into it.
First question: How do you determine which is the better route to take?
Now, for a little deeper dive into one sample scenario: I have a model that has a couple dozen simple data type properties and a few List properties. The Create/Edit View is rendered with a Html.BeginForm(). The submit button returns the entire view model and I can then go through it and save all the data to the DB via the DB Model. Like I said I have a few List pieces as well. For example, I have a List of credit cards accepted which I render as a series of check boxes, a List of Services Provided also rendered as a list of check boxes. All of these are easy to deal with on the Form Post. However, I have one List that is basically a free-form text entry and I would like to have the textbox with an Add button followed by all of the List items, each with a delete button.
My Create/Edit view looks something like:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<RainWorx.FrameWorx.MVC.ViewModels.DirectoryEdit>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="Column12">
<div class="Shadow"></div>
<h2 class="h2row"><%= Model.PageTitle%></h2>
</div>
<% using (Html.BeginForm())
{%>
<%: Html.ValidationSummary(true)%>
<fieldset>
<%--<legend>Fields</legend>--%>
<div class="editor-label">
<%: Html.LabelFor(model => model.Name)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Name, new { style = "width:20em;" })%>
<%: Html.ValidationMessageFor(model => model.Name)%>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.Address1)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.Address1, new { style = "width:20em;" })%>
<%: Html.ValidationMessageFor(model => model.Address1)%>
</div>
...
<div class="editor-label">
<%: Html.LabelFor(model => model.LookupAccepts)%>
</div>
<div class="editor-field">
<hr />
<% foreach (var a in Model.MyAccepts)
{
if (a.Checked)
{ %>
<input type="checkbox" name="AcceptIDs" checked="checked" value="<%: a.ID %>" /> <%: a.Name%><br />
<% }
else
{ %>
<input type="checkbox" name="AcceptIDs" value="<%: a.ID %>" /> <%: a.Name%><br />
<% }
} %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.LookupServices)%>
</div>
<div class="editor-field">
<hr />
<% foreach (var a in Model.MyServices)
{
if (a.Checked)
{ %>
<input type="checkbox" name="ServiceIDs" checked="checked" value="<%: a.ID %>" /> <%: a.Name%><br />
<% }
else
{ %>
<input type="checkbox" name="ServiceIDs" value="<%: a.ID %>" /> <%: a.Name%><br />
<% }
} %>
</div>
<div class="editor-label">
<%: Html.LabelFor(model => model.MyLicenses)%>
</div>
<div class="editor-field">
<hr />
<% Html.RenderPartial("EditLicense", model: Model); %>
</div>
<div class="editor-label">
</div>
<div class="editor-field">
<input type="submit" value="Save" />
</div>
</fieldset>
<% } %>
</div>
<div>
<%: Html.ActionLink("Back to List", "Index")%>
</div>
</asp:Content>
The Partial View looks like:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%# Import namespace="RainWorx.FrameWorx.MVC" %>
<% foreach (var license in Model.MyLicenses) { %>
<% } %>
My thought train for setting it up this way is pretty straight forward (I think it is anyways). I only have something to Ajax on the License section. I want to add one string after another without losing all of the information for the main model. And after the add is done I want to update the partial view with the updated List for it.
There is probably a better way to do this than what I laid out and if so, lay it on me. The main part I am trying to figure out right now (and quickly) is whether Ajax.ActionLink (and my Extension methods for it) are the right direction to go.
An Ajax.BeginForm simply ajaxifies the given form and when you submit it the values of all input fields that it contains are sent to the server. The only difference with a normal form is that the they are sent using AJAX.
On the other hand Ajax.ActionLink generates a simple anchor tag which performs an AJAX request to the given url. It won't send any additional values to the server unless you specify it.
How do you determine which is the better route to take?
Personally I don't use any of those. I use standard Html.BeginForm and Html.ActionLink and write the code manually to AJAXify them unobtrusively with jQuery (if I need to use Ajax of course).
For your scenario of implementing dynamic list editing you may take a look at the following blog post.

Postback problem with partial view

I have the following view
<form action="/Questionnaire/Submit" method="post">
<%:"UserName : "%>
<%=ViewData["UserName"]%>
<%=Html.TextBox("test",ViewData["tt"])%>
<p />
<%:"Phone Number :"%>
<%=ViewData["PhoneNumber"]%>
<p />
<%
foreach (var q in Model)
{
Html.RenderPartial("Question", q);
}
%>
<input type="submit" name="submit" value="submit" />
</form>
That render the following partial view
<% using (Html.BeginForm("Submit", "Questionnaire", FormMethod.Post))
{%>
<%:"Question Number "%>
<%=Model.QuestionNumber%>
<%:" "%>
<%=Model.Body%>
<%:" "%>
<%
foreach (var option in Model.Options)
{%>
<p/>
<%=Html.RadioButton(option.QuestionId.ToString(), (option.IsSelected) )%> <%= option.OptionBody%>
<%
}
}
%>
The problem is , The form dosn't submit , and when I remove the "foreach" statment from the master view, It works
My Objective, is to have the updated model ( from the master view and partial view ) to save it later on in DB
Your master view contains a form and then your partial view also creates a form each time it renders, so you will be left with a page containing multiple forms but only one 'Submit' button.
I'm not 100% certain what you need to do, but I'd try and remove the 'BeginForm' call from the partial and see if that fixes the problem.

Asp.net MVC Client validation, strange behavior

When i write :
<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm())
{ %>
<%: Html.ValidationSummary(false) %>
<%: Html.EditorForModel() %>
<p><input type="submit" name="name" value="Register" /> </p>
<% } %>
My client validation works perfectly.
but when i change " <%: Html.EditorForModel() %>" with (all the code around is the same) :
<div>User name<%: Html.EditorFor(x=>x.Name) %></div>
<div>Password<%: Html.EditorFor(x=>x.Password)%></div>
<div>Verify password <%: Html.EditorFor(x=>x.Password2) %></div>
Client side validation doesn't work.
am i missing something ? what "EditorForModel" does, that i didn't ?
Looks like you're missing validation messages. EditorForModel() is setting this up for you.
#Html.ValidationMessageFor(x=>x.Name)

Problem with error about model being passed into partial view

So I am trying to render a partial view into my page and I am getting the below error:
ERROR
The model item passed into the dictionary is of type
'System.Collections.Generic.List`1[GettingOrganized.Models.Todo]', but this
dictionary requires a model item of type 'GettingOrganized.Models.Todo'.
I don't see what is wrong with the partial view or controller.
PARTIAL VIEW
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<GettingOrganized.Models.Todo>" %>
<% using (Html.BeginForm("Create", "Todo", FormMethod.Post, new {id="CreateTodo"})) {%>
<fieldset>
<legend>Fields</legend>
<div class="editor-label">
<%= Html.LabelFor(model => model.Title) %>
</div>
<div class="editor-field">
<%= Html.TextBoxFor(model => model.Title) %>
<%= Html.ValidationMessageFor(model => model.Title) %>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% } %>
Controller Index View that Renders the Partial View:
<% Html.RenderPartial("CreateElements"); %>
Any thoughts? I would like to keep it as close to this setup since is strong typed.
UPDATE
So to provide a few more details, now that problem is becoming more clear. I am rendering the view on the page in a div and hiding it the user clicks a certain link. Then I want to show the div. This same partial is used in a "Create" view where you can create a "Todo". But I am now wanting to use the partial in the Index view which shows a list of the model "Todo".
The model passed in, in the "Index" view:
Inherits="System.Web.Mvc.ViewPage<IEnumerable<GettingOrganized.Models.Todo>>" %>
So if I don't want to loop through a foreach loop, and just want to show one instance of the model, who do I do that?
Also I can use the following view for the partial and it will work which takes away the strongly typed to the model:
WORKING PARTIAL
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<% using (Html.BeginForm("Create", "Todo",
FormMethod.Post, new { id="CreateTodo"})) {%>
<fieldset>
<legend>Fields</legend>
<p>
<label for="Title">Title:</label>
<%=Html.TextBox("Title")%>
<%=Html.ValidationMessage("Title", "*")%>
</p>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<p>
<input type="submit" value="Create" />
</p>
<% } %>
Possible Answer
However, I believe I might have found an answer.
<% Html.RenderPartial("CreateElements", new Todo()); %>
Is this a proper way to handle this?
However, I believe I might have found an answer.
<% Html.RenderPartial("CreateElements", new Todo()); %>
It looks like you need to pass the model to the partial view - as in:
<% Html.RenderPartial("CreateElements", myModel); %>
I would look into how you're passing in your model into the RenderPartial:
<% Html.RenderPartial("CreateElements", model); %>
And make sure that model is of type GettingOrganized.Models.Todo.
Since you're not passing a model into your RenderPartial call, MVC is effectively trying to create one for you using the ViewDataDictionary and model from the parent page.
It looks like the parent page has a model type which is a List of ToDo items, so I guess you can just call your RenderPartial method inside of a loop; something along the lines of:
<% foreach (GettingOrganized.Models.Todo todoItem in Model) {
Html.RenderPartial("CreateElements", todoItem);
} %>

PartialView renders new page instead of in div

I had this problem before and can't for life of me remember how to fix it
or where I googled about it.
I am passing back from an action a partial view
return PartialView("CommentsListControl", recipe.Comments);
But this loads a new web page and not into my div WHY?????????
<table width="100%">
<tr><td>
<div id="divComments">
<% using (Ajax.BeginForm("CreateComment", new AjaxOptions { UpdateTargetId = "divCommentsList", InsertionMode = InsertionMode.Replace }))
{ %>
<textarea id="comments" name="comments" rows="3" cols="60"></textarea>
<table width="100%"><tr><td align="right">
Save Comment
<%= Html.Hidden("recipeid", Model.RecipeID) %>
</td></tr>
</table>
<% } %>
</div>
</td></tr>
<tr><td>
<div id="divCommentsList">
<% Html.RenderPartial("CommentsListControl", Model.Comments); %>
</div>
</td></tr>
</table>
The sample you showed doesn't have a submit button on the form. In WebForms, you could use an "asp:Hyperlink" control to generate a link that looked liked it submitted a form, but that was because WebForms was implementing the JavaScript for you. In MVC you have to do that yourself. Try swapping your "Save Comment" link out for a submit button:
<input type="submit" value="Save Comment" />
Then use CSS to style the button to your hearts content.

Resources