How to write the following in MVC? - asp.net-mvc

How can I write the following in MVC?
<input type="text" name="ProjectList[' + count++ + '].ID" value = ' + value + ' />

Use code expressions in <%= ... %> block in the attributes.
<input type="text" name="<%= ProjectList[count++].ID %>" value = ' + value + ' />
If the value is meant to be another property of the ProjectList item... then setting a local variable would be easier:
<% var item = ProjectList[count++].ID; %>
<input type="text" name="<%= item.ID %>" value = '<%= item.value %>' />
Albeit that the HTML helpers (see other answer) provides a better approach.
NB. In .NET 4 prefer <%: ... %> to ensure things are HTML Encoded.

<%= Html.TextBox("ProjectList[" + (count++) + "].ID",
value, new { #class = "css" }) %>

Related

How to bind data from model to view using knockoutJS

in my application i'm able to get data-collection from model when i'm binding it using knockoutJS that it generate an error on console, i need with data-bind attribute data-class, i'm doing so but not working;
my view binding code as :
<div class="filter-map-content" data-bind="foreach: { data: Services, as: 'service' }">
<input type="checkbox" class="custom-checkbox" data-bind="css: { 'id': service.id, 'data-class': 'GTM_MMCheckbox_' + service.title + '_' + service.id }" data-class=" 'GTM_MMCheckbox_' + service.title + '_' + service.id" />
</div>
i'm able to get data collection when i write it on console , i'm getting data collection as result
data-class is not finding in my javascript code
but data-collection is available
<div class="filter-map-content" data-bind="foreach: { data: Services, as: 'service' }">
<input type="checkbox" class="custom-checkbox" data-bind="attr: { 'id': service.id, 'data-class': 'GTM_MMCheckbox_' + service.title + '_' + service.id }" />
</div>
you have to use the "attr"-binding ;)
...and if your "service.title" or "service.id" is observable you have to write e.g. service.title()

Render view fragments directly, using thymeleaf

I am trying to get just a part of the view(fragment) from a template, i just end up getting the following error
org.thymeleaf.exceptions.TemplateInputException: Error resolving template "path/to/template::fragment", template might not exist or might not be accessible by any of the configured Template Resolvers
And this is the current configuration:
TemplateResolver resolver = new ServletContextTemplateResolver();
resolver.setTemplateMode("HTML5");
resolver.setPrefix("/WEB-INF/templates/");
resolver.setCharacterEncoding("UTF-8");
resolver.setSuffix(".html");
resolver.setCacheable(false);
engine = new TemplateEngine();
engine.setTemplateResolver(resolver);
It soud be possible as it is given as a feature(but using spring-mvc, which I am not):
http://www.thymeleaf.org/whatsnew21.html#spfrag
The site application works using jsp, and the code that is failing looks like this:
render("surveys/survey", params,request,response);//This works
render("surveys/survey::surveyBody", params,request,response);//This fails
public static String render(String template,Map<String,?> context,HttpServletRequest request, HttpServletResponse response){
IContext iContext = new WebContext(request,response,request.getServletContext(),Locale.US, context);
return engine.process(template, iContext);
}
inside the template there is something like this
<div th:fragment="surveyBody">
<div th:each="field,idx : ${survey.fields}" th:id="${'field_' + field.id}" th:class="${field.type + ' row outter'}">
<input type='hidden' th:id="${'field_' + field.id + '_id'}" id='field_100_id' value='100' />
<input type='hidden' th:id="${'field_' + field.id + '_type'}" id='field_100_type' th:value='${field.type}' />
<input type='hidden' th:id="${'field_' + field.id + '_order'}" id='field_100_order' th:value='${field.obj.order}' />
<input type='hidden' th:id="${'field_' + field.id + '_outstanding'}" id='field_100_outstanding' value='-1' />
<h3 th:utext="${field.obj.title[0].title}">title</h3>
<h4 th:if="${!field.obj.subTitle.isEmpty()}" th:utext="${field.obj.subTitle[0].title}">subtitle</h4>
<div class="answers row">
<div th:replace="surveys/questions::${field.type}(${field},${disabled},${idx.index})"></div>
</div>
</div>
</div>
th:fragment is called in template using th:replace or th:include attributes.
Try to create a clear file (surveys/surveyfragment) and write there:
<div th:replace="surveys/survey::surveyBody"/>
And then call it:
render("surveys/surveyfragment", params,request,response);
Should work

How To avoid that an ascx template overwrites the original style, class, maxlength, etc. attributes?

Main issue: Adding to all(!) textboxes in a MVC2 solution/project a js/jquery method.
Basics: How to call an ascx template?
Solved, see here
(Thanks to Darin Dimitrov!)
BUT...
Means the ascx template "Test.ascx" will be called like here shown:
<%: Html.EditorFor(model => model.Firstname, "Test", new { style = "float: left; width: 4.1em;", maxlength = "4" })%>
The "Test.ascx" template adds the js/jquery function.
Works fine, np so fare.
But: The "original" attributes style="..." maxlength="..." will be lost/overwritten.
My current solution / my "Test.ascx" file:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<input type="text"
id="<%: ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty) %>"
name="<%: ViewData.TemplateInfo.HtmlFieldPrefix %>"
value="<%: ViewData.TemplateInfo.FormattedModelValue %>"
style="<%: ViewData["style"] %>"
class="<%: ViewData["class"] %>"
maxlength="<%: ViewData["maxlength"] %>"
onkeyup="Foo(this); return false;"/>
This works really fine and returns / renders it perfectly:
<input type="text"
id="Firstname"
name="Firstname"
value=""
style="float: left; width: 4.1em;"
class=""
maxlength="4"
onkeyup="Foo(this); return false;"/>
Note that here are the style="..." and maxlength="..." attributes are well handled!
I use currently the "standard" < input ... /> tag because I didnt get this to work:
<%
String tmpConfig = " new {onkeyup=\"Foo(this); return false;\"";
String style = this.ViewData["style"] as String;
if (!String.IsNullOrEmpty(style))
tmpConfig += ", style=\"" + style + "\"";
String #class = this.ViewData["class"] as String;
if (!String.IsNullOrEmpty(#class))
tmpConfig += ", class=\"" + #class + "\"";
String maxlength = this.ViewData["maxlength"] as String;
if (!String.IsNullOrEmpty(maxlength))
tmpConfig += ", maxlength=\"" + maxlength + "\"";
tmpConfig += " } ";
%>
<!-- doesnt work: -->
<%: Html.TextBox( string.Empty,
ViewData.TemplateInfo.FormattedModelValue,
// new { onkeyup = "Foo(this); return false;" } // the style, class, maxlength attributes will be lost / not rendered!
// new { tmpConfig } // result would be the attribut: tempConfig=" onkeyup..."
// new tmpConfig // result: error, tmpConfig isnt object
Html.Encode(tmpConfig) // doesnt work ...
)%>
This renders finally the same but WITHOUT the style="..." and maxlength="..." attributes!
But I want to use the <%: Html.TextBox(...) %> instead of the < input ... /> tag!
Because this would give me the possibility to avoid an empty attribute like class="" and like before shown.
Where is my mistake?
You have to supply the Html.TextBox with a dictionary of String,Object to hold all attributes
<%
var dict = new Dictionary<string, object>();
String style = this.ViewData["style"] as String;
if (!String.IsNullOrEmpty(style))
dict.Add("style", style);
String #class = this.ViewData["class"] as String;
if (!String.IsNullOrEmpty(#class))
dict.Add("class", #class);
String maxlength = this.ViewData["maxlength"] as String;
if (!String.IsNullOrEmpty(maxlength))
dict.Add("maxlength", maxlength);
dict.Add("onkeyup", "Foo(this); return false;");
%>
<%: Html.TextBox( string.Empty,
ViewData.TemplateInfo.FormattedModelValue,
dict
)%>

simple question: Difficulty in declaring and using variable

What is wrong with the following code: I`m having the error message
Error 1 ; expected
<%if (Model.ReferenceFields != null)
{%>
<%int count = 1; %>
<%foreach (var referenceName in Model.ReferenceFields)
{%>
<%var value = "value"; %>
<%count++; %>
<%value = value + count.ToString(); %>
<tr>
<td><input type="hidden" name="Tests.Index" value='<%value%>' /></td>
<td><input type="text" name="Tests['<%value%>'].Value"/></td>
<td><input type="button" value= "Add" /></td></tr>
<%}
%>
<%}
%>
The basic problem is lines like this
<input type="hidden" name="Tests.Index" value='<%value%>' />
So you're wanting to write out the contents of value into the html but thats not the way to do it. It should be
<input type="hidden" name="Tests.Index" value='<% Response.Write(value); %>' />
or a shortcut for Response.Write is <%= so
<input type="hidden" name="Tests.Index" value='<%= value %>' />
ASP101 - Writing Your First ASP.NET Page
The other problem is that the formatting of your code is, quite frankly butt ugly and you're making it hard work for yourself when trying to read it. Try this instead.
<%
if (Model.ReferenceFields != null)
{
int count = 1;
foreach (var referenceName in Model.ReferenceFields)
{
var value = "value";
count++;
value = value + count.ToString();
%>
<tr>
<td><input type="hidden" name="Tests.Index" value='<%= value %>' /></td>
<td><input type="text" name="Tests['<%= value %>'].Value"/></td>
<td><input type="button" value= "Add" /></td></tr>
<%
}
}
%>

Form File Upload with other TextBox Inputs + Creating Custom Form Action attribute

I am attempting to create a form where a user is able to enter your typical form values textboxes etc, but also upload a file as part of the form submission. This is my View code it can be seen that the File upload is identified by the MCF id:
<% using (Html.BeginForm("Create", "Problem", FormMethod.Post, new { id = "ProblemForm", enctype = "multipart/form-data" }))
{%>
<p>
<label for="StudentEmail">Student Email (*)</label>
<br />
<%= Html.TextBox("StudentEmail", Model.Problem.StudentEmail, new { size = "30", maxlength=26 })%>
<%= Html.ValidationMessage("StudentEmail", "*") %>
</p>
<p>
<label for="Type">Communication Type (*)</label>
<br />
<%= Html.DropDownList("Type") %>
<%= Html.ValidationMessage("Type", "*") %>
</p>
<p>
<label for="ProblemDateTime">Problem Date (*)</label>
<br />
<%= Html.TextBox("ProblemDateTime", String.Format("{0:d}", Model.Problem.ProblemDateTime), new { maxlength = 10 })%>
<%= Html.ValidationMessage("ProblemDateTime", "*") %>
</p>
<p>
<label for="ProblemCategory">Problem Category (* OR Problem Outline)</label>
<br />
<%= Html.DropDownList("ProblemCategory", null, "Please Select...")%>
<%= Html.ValidationMessage("ProblemCategory", "*")%>
</p>
<p>
<label for="ProblemOutline">Problem Outline (* OR Problem Category)</label>
<br />
<%= Html.TextArea("ProblemOutline", Model.Problem.ProblemOutline, 6, 75, new { maxlength = 255 })%>
<%= Html.ValidationMessage("ProblemOutline", "*") %>
</p>
<p>
<label for="MCF">Mitigating Circumstance Form</label>
<br />
<input id="MCF" type="file" />
<%= Html.ValidationMessage("MCF", "*") %>
</p>
<p>
<label for="MCL">Mitigating Circumstance Level</label>
<br />
<%= Html.DropDownList("MCL") %>
<%= Html.ValidationMessage("MCL", "*") %>
</p>
<p>
<label for="AbsentFrom">Date Absent From</label>
<br />
<%= Html.TextBox("AbsentFrom", String.Format("{0:d}", Model.Problem.AbsentFrom), new { maxlength = 10 })%>
<%= Html.ValidationMessage("AbsentFrom", "*") %>
</p>
<p>
<label for="AbsentUntil">Date Absent Until</label>
<br />
<%= Html.TextBox("AbsentUntil", String.Format("{0:d}", Model.Problem.AbsentUntil), new { maxlength = 10 })%>
<%= Html.ValidationMessage("AbsentUntil", "*") %>
</p>
<p>
<label for="AssessmentID">Assessment Extension</label>
<br />
<%= Html.DropDownList("AssessmentID") %>
<%= Html.ValidationMessage("AssessmentID", "*") %>
<%= Html.TextBox("DateUntil", String.Format("{0:d}", Model.AssessmentExtension.DateUntil), new { maxlength = 16 })%>
<%= Html.ValidationMessage("DateUntil", "*") %>
</p>
<p>
<label for="Details">Assessment Extension Details</label>
<br />
<%= Html.TextArea("Details", Model.AssessmentExtension.Details, 6, 75, new { maxlength = 255 })%>
<%= Html.ValidationMessage("Details", "*") %>
</p>
<p>
<label for="RequestedFollowUp">Requested Follow Up</label>
<br />
<%= Html.TextBox("RequestedFollowUp", String.Format("{0:d}", Model.Problem.RequestedFollowUp), new { maxlength = 16 })%>
<%= Html.ValidationMessage("RequestedFollowUp", "*") %>
</p>
<p>
<label for="StaffEmail">Staff</label>
<br />
<%= Html.ListBox("StaffEmail", Model.StaffEmail, new { #class = "multiselect" })%>
<%= Html.ValidationMessage("StaffEmail", "*")%>
</p>
<p>
<input class="button" type="submit" value="Create Problem" />
</p>
This is my controller code:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Create(Problem problem, AssessmentExtension assessmentExtension, Staff staffMember, HttpPostedFileBase file, string[] StaffEmail)
{
if (ModelState.IsValid)
{
try
{
Student student = studentRepository.GetStudent(problem.StudentEmail);
Staff currentUserStaffMember = staffRepository.GetStaffWindowsLogon(User.Identity.Name);
var fileName = Path.Combine(Request.MapPath("~/App_Data"), Path.GetFileName(file.FileName));
file.SaveAs(#"C:\Temp\" + fileName);
if (problem.RequestedFollowUp.HasValue)
{
String meetingName = student.FirstName + " " + student.LastName + " " + "Mitigating Circumstance Meeting";
OutlookAppointment outlookAppointment = new OutlookAppointment(currentUserStaffMember.Email, meetingName, (DateTime)problem.RequestedFollowUp, (DateTime)problem.RequestedFollowUp.Value.AddMinutes(30));
}
problemRepository.Add(problem);
problemRepository.Save();
if (assessmentExtension.DateUntil != null)
{
assessmentExtension.ProblemID = problem.ProblemID;
assessmentExtensionRepository.Add(assessmentExtension);
assessmentExtensionRepository.Save();
}
ProblemPrivacy problemPrivacy = new ProblemPrivacy();
problemPrivacy.ProblemID = problem.ProblemID;
problemPrivacy.StaffEmail = currentUserStaffMember.Email;
problemPrivacyRepository.Add(problemPrivacy);
if (StaffEmail != null)
{
for (int i = 0; i < StaffEmail.Length; i++)
{
ProblemPrivacy probPrivacy = new ProblemPrivacy();
probPrivacy.ProblemID = problem.ProblemID;
probPrivacy.StaffEmail = StaffEmail[i];
problemPrivacyRepository.Add(probPrivacy);
}
}
problemPrivacyRepository.Save();
return RedirectToAction("Details", "Student", new { id = student.Email });
}
catch
{
ModelState.AddRuleViolations(problem.GetRuleViolations());
}
}
return View(new ProblemFormViewModel(problem, assessmentExtension, staffMember));
}
This form was working correctly before I had to switch to using a non-AJAX file upload, this was due to an issue with Flash when enabling Windows Authentication which I need to use.
It appears that when I submit the form the file is not sent and I am unsure as to why? I have also been unsuccessful in finding an example online where a file upload is used in conjunction with other input types.
Another query I have is that for Create, and Edit operations I have used a PartialView for my forms to make my application have higher code reuse. The form action is normally generated by just using:
Html.BeginForm()
And this populates the action depending on which Url is being used Edit or Create. However when populating HTML attributes you have to provide a action and controller value to pass HTML attributes.
using (Html.BeginForm("Create", "Problem", FormMethod.Post, new { id = "ProblemForm", enctype = "multipart/form-data" }))
Is it possible to somehow populate the action and controller value depending on the URL to maintain code reuse? Thinking about it whilst typing this I could set two values in the original controller action request view data and then just populate the value using the viewdata values?
Any help on these two issues would be appreciated, I'm new to asp.net mvc :-)
Thanks,
Jon
ANSWER
Ok guys worked out the issue and its incredibly simple I didn't have the HTML name attribute on the file component of my form:
<input id="MCF" name="MCF" type="file" />
Now this binds to my method signature!
With the first issue, it looks like your action method signature is wrong. Because your fileInput has an ID of MCF, the HttpPostedFileBase parameter should have the same name so that the model binder knows to bind to that action method parameter.
E.g.
public ActionResult Create(Problem problem, AssessmentExtension assessmentExtension, Staff staffMember, HttpPostedFileBase mcf, string[] StaffEmail)
As for the second issue... you could try something like this:
<form method="post" id="ProblemForm" action="<%= Url.Action(ViewContext.RouteData.Values["action"].ToString()) %>" enctype="multipart/form-data">
The current controller will also be in RouteData.Values but if you're after the area, that'll be in RouteData.DataTokens.
HTHs,
Charles
Ok guys worked out the issue and its incredibly simple I didn't have the HTML name attribute on the file component of my form:
<input id="MCFile" name="MCFile" type="file" />
I have changed my method signature to match the name:
public ActionResult Create(Problem problem, AssessmentExtension assessmentExtension, Staff staffMember, HttpPostedFileBase MCFFile, string[] StaffEmail)
Now this binds to my method signature!

Resources