Enviroment: Visual Studio 2012, MVC4, Razor.
My code:
#using (Html.BeginForm())
{
#Html.ValidationSummary(false)
<fieldset>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<p><input name="action:FirstResult" type="submit" value="ResultOne" /></p>
<p><input name="action:SecondResult" type="submit" value="ResultTwo" /></p>
</fieldset>
}
The problem is - I have two Submit Buttons. And they are sending the information to the different views. And I want that views in new windows.
I've tried to insert "new{target = "_blank"}" inside the "#using (Html.BeginForm())", and it is doesn't work.
Please replace your code as follows to solve your problem
#using (Html.BeginForm("FirstAction","Controller"))
{
<input type="submit" value="ResultOne" />
}
#using (Html.BeginForm("SecondAction","Controller"))
{
<input type="submit" value="ResultTwo" />
}
Regards,
Pavan.G
Related
Am I missing something? I copied this code snippet over:
Automatically render the reCAPTCHA widget
I entered my registered data-sitekey. The reCAPTCHA displays and works when I check the box, but if I don't check the box and submit my form, the reCAPTCHA doesn't stop the user submission and my controller processes the request.
#model Medicaid.WebUI.ViewModels.RequestModel
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<table class="table">
<tr>
<td>
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "request-form", #class = "form-horizontal" }))
{
#Html.AntiForgeryToken()
<fieldset>
<legend>Request</legend>
<div class="form-group">
<label for="inputFirstName" class="col-lg-2 control-label">First Name</label>
<div class="col-lg-10">
<input type="text" value="#Model.FirstName" class="form-control" maxlength="50" name="FirstName" id="FirstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group">
<label for="inputLastName" class="col-lg-2 control-label">Last Name</label>
<div class="col-lg-10">
<input type="text" value="#Model.LastName" class="form-control" maxlength="50" name="LastName" id="LastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" value="#Model.Email" class="form-control" maxlength="100" name="Email" id="Email" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2"><br /><br />
<div class="g-recaptcha" data-sitekey="IenterMykeyHere"></div><br /><br />
<button type="submit" class="btn btn-primary">Submit Request</button>
</div>
</div>
</fieldset>
}
</td>
</tr>
</table>
<br /><br />
#Html.ValidationSummary()
I was having this issue and re-read the documentation, and worked it out as the following:
function onBegin() {
$("input[type='hidden']").val(grecaptcha.getResponse());
}
You have to add a javascript function to the "onBegin" parameter of the AjaxOptions object from the MVC html helper - that will copy the value of the widget's response to a hidden variable you need to declare inside your form, so the submit button sends it to the controller. Don't forget to add a variable with the same name to the "RequestModel" view model so that the mvc model-binding passes it and you then will be able, in the server, to know if the user has clicked the button or not.
#using (Ajax.BeginForm("NewRecaptchaVerify", "ReCaptcha", new AjaxOptions
{
HttpMethod = "Post",
OnSuccess = "onSuccess",
OnFailure = "onFailure",
OnBegin = "onBegin",
OnComplete = "onComplete"
}))
{
#Html.HiddenFor(m => m.Response)
<div class="g-recaptcha" data-sitekey="your-site-key"></div>
<input type="submit" id="btnSubmit" value="Submit" />
}
(for the record, I am now facing the problem of knowing, in the server, in cases where the widget prompted the user to enter a text input, after clicking the button - whether he/she entered the text or not. Seems to me that in the end I will have no way out other than performing a GET request, in the server, to the widget's api, as they put it in the documentation: https://www.google.com/recaptcha/api/siteverify?secret=your_secret&response=response_string&remoteip=user_ip_address
I am using SmartAdmin for UI purpose and MVC4 for coding. SmartAdmin CSS is not supported inside
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<div class="row">
<section class="label col col-1">
#Html.LabelFor(model => model.Name, new { #style = "text-align:left" })
< /section>
<section class="col col-4">
<label class="input"> <i class="icon-append fa fa-user"></i>
#Html.TextBoxFor(model => model.Name, null, new { #placeholder = "Enter Name" })
#Html.ValidationMessageFor(model => model.Name)
</label>
</section>
<section class="label col col-1">
#Html.LabelFor(model => model.Role)
</section>
<section class="col col-4">
<label class="input"> <i class="icon-append fa fa-user"></i>
#Html.TextBoxFor(model => model.Role, null, new { #placeholder = "Enter Role" })
#Html.ValidationMessageFor(model => model.Role)
</label>
</section>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
But by using code above, UI does not looks in proper format. When I remove
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
from code then UI looks properly but does not posts values to controller.Now my issue is that, can MVC4 supports SmartAdmin for UI purpose?
Is there any solution for that?
Here is a great tutorial for that:
http://myorange.ca/supportforum/question/how-to-integrate-smartadmin-1-4-x-into-asp-net-mvc-5
add the "smart-form" tag into the class field like below to activate it.
Html.BeginForm("ACTIONNAME", "CONTROLLERNAME", FormMethod.Post, new { #class = "smart-form ", id = "myID" }))
But if you are starting with smartadmin and MVC, i highly recommand you to follow the tutorial:
http://myorange.ca/supportforum/question/how-to-integrate-smartadmin-1-4-x-into-asp-net-mvc-5
I use a bootstrap based template. It works very well for me, in my code I do not use the form helper, so more along the lines of . Try doing this instead to see if that helps. It is entirely possible that the helper is allocating a class to the form which throws out the CSS formatting. Using something like Firebug to look at the effective CSS will help you.
I am developing a web application without any models. I just do not need them for what I am trying to do. I want to take some input from the view and to pass it on the controller. So far so good. The problem is that on the view I get some unwanted text: "System.Web.Mvc.Html.MvcForm"; it comes from the follwoing line: #Html.BeginForm("GetInfo", "Test", FormMethod.Post, new { id = "TestForm" } )
More precisely, my code is this:
--the view
#Html.BeginForm("GetInfo", "Test", FormMethod.Post, new { id = "TestForm" } )
<br/>
<legend>Report</legend>
<br />
<div class="editor-label">
<label>Date From</label>
</div>
<div class="editor-field">
<input name="dateFrom" type="date" required />
</div>
<br />
<input type="submit" class="btn btn-primary" />
and the method from the controller is :
public ActionResult GetInfo(DateTime dateFrom)
{
//some code
return RedirectToAction("Index");
}
Any ideas?
Thank you in advance! :)
Try
#using (Html.BeginForm(.....))
{
// Html here
}
I've got 3 forms on one view on mvc project like this"
VIEW:
<div>
<fieldset>
<legend>Deposit Money</legend>
<div>#Html.LabelFor(u=>u.AccountNumber1)</div>
<div>#Html.DropDownList("Accounts", "-- Select Account --")
</div>
<div>#Html.LabelFor(u=>u.Amount)</div>
<div>#Html.TextBoxFor(u => u.Amount,new {style = "width:150px"})
#Html.ValidationMessageFor(u => u.Amount)
</div>
<div>#Html.LabelFor(u=>u.Comment)</div>
<div>#Html.TextAreaFor(u => u.Comment,new {style = "width:250px"})
#Html.ValidationMessageFor(u => u.Comment)
</div>
<input type="submit" value ="Submit" />
<input type="reset" value ="Clear" />
</fieldset>
</div>
}
</div>
<div id="middlepanel" style="position:absolute;left:33%;right:33%;">
#using (Html.BeginForm("Withdrawal", "ATM", FormMethod.Post, new { }))
{
#Html.ValidationSummary(true,"Deposit Failed. Check Your Details");
<div>
<fieldset>
<legend>Withdraw Money</legend>
<div>#Html.LabelFor(u=>u.AccountNumber1)</div>
<div>#Html.DropDownList("Accounts", "-- Select Account --")
</div>
<div>#Html.LabelFor(u=>u.Amount)</div>
<div>#Html.TextBoxFor(u => u.Amount,new {style = "width:150px"})
#Html.ValidationMessageFor(u => u.Amount)
</div>
<div>#Html.LabelFor(u=>u.Comment)</div>
<div>#Html.TextAreaFor(u => u.Comment,new {style = "width:250px"})
#Html.ValidationMessageFor(u => u.Comment)
</div>
<input type="submit" value ="Submit" />
<input type="reset" value ="Clear" />
</fieldset>
</div>
}
</div>
<div id="rightpanel" style="position:absolute;right:0;width:33%;">
#using (Html.BeginForm("Transfer", "ATM", FormMethod.Post, new { }))
{
#Html.ValidationSummary(true,"Deposit Failed. Check Your Details");
<div>
<fieldset>
<legend>Transfer Money</legend>
<div>#Html.LabelFor(u=>u.AccountNumber1)</div>
<div>#Html.DropDownList("Accounts", "-- Select Account --")
</div>
<div>#Html.LabelFor(u=>u.AccountNumber2)</div>
<div>#Html.DropDownList("Accounts", "-- Select Account --")
</div>
<div>#Html.LabelFor(u=>u.Amount)</div>
<div>#Html.TextBoxFor(u => u.Amount,new {style = "width:150px"})
#Html.ValidationMessageFor(u => u.Amount)
</div>
<div>#Html.LabelFor(u=>u.Comment)</div>
<div>#Html.TextAreaFor(u => u.Comment,new {style = "width:250px"})
#Html.ValidationMessageFor(u => u.Comment)
</div>
<input type="submit" value ="Submit" />
<input type="reset" value ="Clear" />
</fieldset>
</div>
}
</div>
in my controller, I am processing each of the above functionality.
However when one of the forms have an error (i.e blank field)
error is displayed on all the forms (validationSummary)
how can I build invidual errors per form?
Consider using partial views for each forms and call your partial view in your main view using
#Html.Partial("PartialViewName")
MVC is very clear on how data is sent to the browser. You go to a URL, it runs code to create a model, passes that typed model into a view, which then renders HTML based on the state of the model.
What I'm not finding so clear however is when a user submits a form on the page, how does MVC map that form post back to the model for use in the controller?
I'm guessing the magic happens somewhere in:
#Html.EditorFor(model => model.Title)
But I'm not understanding why....
I'm following Getting started with ASP.NET MVC 3. Which is where the code below is from for easy reference.
Controller:
public ActionResult Edit(int id)
{
Movie movie = db.Movies.Find(id);
return View(movie);
}
[HttpPost]
public ActionResult Edit(Movie movie)
{
if (ModelState.IsValid)
{
db.Entry(movie).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(movie);
}
View:
#model MvcMovie.Models.Movie
#{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Movie</legend>
#Html.HiddenFor(model => model.ID)
<div class="editor-label">
#Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ReleaseDate)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ReleaseDate)
#Html.ValidationMessageFor(model => model.ReleaseDate)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Genre)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Genre)
#Html.ValidationMessageFor(model => model.Genre)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Price)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Price)
#Html.ValidationMessageFor(model => model.Price)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
Which generates:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Edit</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>MVC Movie App</h1>
</div>
...
</header>
<section id="main">
<h2>Edit</h2>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<form action="/Movies/Edit/4" method="post"> <fieldset>
<legend>Movie</legend>
<input data-val="true" data-val-number="The field ID must be a number."
data-val-required="The ID field is required." id="ID" name="ID" type="hidden" value="4" />
<div class="editor-label">
<label for="Title">Title</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Title" name="Title" type="text" value="Rio Bravo" />
<span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="ReleaseDate">ReleaseDate</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The ReleaseDate field is required."
id="ReleaseDate" name="ReleaseDate" type="text" value="4/15/1959 12:00:00 AM" />
<span class="field-validation-valid" data-valmsg-for="ReleaseDate" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Genre">Genre</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Genre" name="Genre" type="text" value="Western" />
<span class="field-validation-valid" data-valmsg-for="Genre" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Price">Price</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number."
data-val-required="The Price field is required." id="Price" name="Price" type="text" value="9.99" />
<span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"></span>
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
</form>
<div>
Back to List
</div>
</section>
<footer>
</footer>
</div>
</body>
</html>
MVC just matches the public properties of a model against values in the FormsCollection object of the same name. If there is a match of name and type, then an instance of the model is created and the values copied into those properties.
This process is called Model Binding, and you can create custom Model Binders.
The process has little to do with EditorFor directly, although EditorFor uses templates that make sure to name the form inputs in a manner that the model binder can understand.
ASP.Net MVC is based on Convention over Configuration concept. So most of the things work like magic but underneath mechanisms are there to work in default as well as to customize if you want.
The term Model Binding is the keyword you should check out to understand this.
Check here
6-tips-for-asp-net-mvc-model-binding
MVC uses whats referred to as a Model Binder to take post back values and recreate a model.
Here is a good read: Models and Validation in ASP.NET MVC