I have a simple html form. The built-in HTML helpers are rendering. The markup is not created. What am I missing?
<asp:Content ID="Content5" ContentPlaceHolderID="IslandPlaceHolder" runat="server">
<%using (Html.BeginForm()){%>
<div id="manifest">Manifest Option: <%Html.DropDownList("docid",ViewData["manifests"] as SelectList);%></div>
<div id="release">Release Version: <%Html.TextBox("release"); %></div>
<div id="locale">Localization: <%Html.DropDownList("localization"); %></div>
<div id="label">Label: <%Html.DropDownList("label"); %></div>
<div id="session">Session ID (optional): <%Html.TextBox("sessionInput"); %></div>%>
<input type="submit" value="Build" />
<%}%>
</asp:Content>
You need to change <% to <%= to output the markup. Right now it is making the call, but doing nothing with the returned string.
You'll also need to remove the semicolon at the end of the method calls.
<%= Html.DropDownList("docid",ViewData["manifests"] as SelectList) %>
Related
I created a controller for "products" to be added into my app that is utilizing the Refinery CMS.
Hhere is the code for the page in show.html.erb
<div>
<h3>Feedback Sought</h3>
<p>
<%=raw #product.description %>
</p>
</div>
But this is what is actually produced in the live page.
For the meantime I can implement a digsuting hack of removing the margin by targeting the element, like
.productFeedbackDescription p { margin: 0; }
and then doing inline css along the lines of
<p style="margin-bottom: 12px;">
<%=raw #product.description %>
</p>
By default Refinery adds <p> tags in the template.
And by default, using the WYSIWYG editor also adds <p> tags. So I manually removed the <p> tags from the template.
For reference, this was the default code generated by refinery when I create the controller
<section>
<h1>Product Summary</h1>
<p>
<%=raw #product.product %>
</p>
</section>
Now my code is
<div>
<h3>Product Summary</h3>
<%=raw #product.product %>
</div>
Here is a screenshot of the code now generated as live in page.
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.
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)
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);
} %>
I have a standard Edit form view within MVC, and I need to place a user control, in this case Create inside the BeginForm, like below:
When the issue is that the Create ascx when the form is submitted does not fire it's action in the controller, what am I doing wrong?
<% using (Html.BeginForm())
{%>
<fieldset>
<legend>Tax</legend>
<p>
<label for="Name">
Name:</label>
<%= Html.TextBox("Name", Model.Tax.Name) %>
<%= Html.ValidationMessage("Name", "*") %>
</p>
<p>
<% Html.RenderAction("Create", "Mileage"); %>
</p>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
<% } %>
Here is the Create.ascx
<% using (Html.BeginForm())
{%>
<fieldset>
<p>
<label for="Distance">
Distance:</label>
<%= Html.TextBox("Distance", Model.Mileage.Distance)%>
<%= Html.ValidationMessage("Distance", "*") %><span class="field-validation-error"
id="field-validation-error-distance">*</span>
</p>
</fieldset>
<% } %>
You have nested forms in your resulting HTML. This will not work as expected. Remove the form from the inner view. The inner view will then be incomplete, so if you were using it as a stand-alone, you should make it shared, and create another view, which will just open the form, render the inner view, and close the form.
As a margin note: you are not using the default binder. You can if you want to, it will work even with nested objects (Html.TextBox("Mileage.Distance"), for example).
Nested form are not supported in HTML. See here: The FORM element
Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested.
Either remove the form from your partial view and let the container view provide it, or remove the form from the view and add it to the partial thus making it independent of the parent.