View1
#model WebApplication2.Models.TestViewModel
#using (Html.BeginForm("Test", "Home"))
{
<div>Upper form</div>
#Html.EditorForModel()
}
In EditorTemplates i have editor for this view
#model WebApplication2.Models.TestViewModel
#using (Html.BeginForm("Test2", "Home"))
{
<h2>TestViewModel</h2>
}
The actual result is
<form action="/Home/Test" method="post">
<div>Upper form</div>
<div class="editor-label"><label for="Age">Age</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field Age must be a number." data-val-required="The Age field is required." id="Age" name="Age" type="number" value="0"> <span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span></div>
<div class="editor-label"><label for="Name">Name</label></div>
<div class="editor-field"><input class="text-box single-line" id="Name" name="Name" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></div>
</form>
But the desire result should be
<form action="/Home/Test" method="post">
<div>Upper form</div>
<form action="/Home/Test2" method="post">
<div class="editor-label"><label for="Age">Age</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field Age must be a number." data-val-required="The Age field is required." id="Age" name="Age" type="number" value="0"> <span class="field-validation-valid" data-valmsg-for="Age" data-valmsg-replace="true"></span></div>
<div class="editor-label"><label for="Name">Name</label></div>
<div class="editor-field"><input class="text-box single-line" id="Name" name="Name" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></div>
<form>
</form>
So my question is how can i nested the second BeginForm correctly ?
As other mentioned in the comments,nested forms are not a good idea.
What you should be doing is, Keep the form tag for your outer view as it is. For your model, Use normal html form elements without a form tag and use ajax to post data to the server from your java script and once you receive the data, you should be able to access the DOM elements using jQuery and update values as needed.
Something like this ( The below code won't work with the markup you provided. This is just to give you an idea how to handle it generally);
$(function(){
$(document).on("click","#SomeBtnOnModelDialog",function(e){
//Some submit button on model dialog was clicked
e.preventDefault();
//Read the data from model dialog elements using jquery
// and build an object to send to action method
var dummyDataYouWantToSend = { name : "Read it using jquery",age:12};
$.post("#Url.Action("SomeActionMethod","YourController")", dummyDataYouWantToSend ,
function (res){
//Got some response.
//Now update some DOM elemets from the JSON response came back?
// $("#SomeFormElementId").val(res.SomePropertyName);
});
});
});
Related
I have a model with a fildValue1 parameter which has a string data type. when requested, the text can be displayed in the input tag but not in the textarea
<div>
<input type="text" asp-for="fildName1" value="#Model.fildName1" placeholder="name">
<textarea type="text" style="width: 200px" asp-for="fildValue1" placeholder="value">#Model.fildValue1</textarea>
<input type="checkbox" asp-for="fildInline1" > Inline
</div>
I tried different tags only works with Input tag. but i need line input capability
I have an encapsulated constructor like { get; set;} in a variable. I figured it out and it doesn't output value. When I change it to ="" it outputs the value, but now when I want to get it through form input it outputs an empty value
Change the
<textarea type="text" style="width: 200px" asp-for="fildValue1" placeholder="value">#Model.fildValue1</textarea>
TO
<textarea type="text" style="width: 200px" asp-for="fildValue1" placeholder="value"></textarea>
I am trying to return a meetingSpace object from the last form group in this razor page:
<form method="post">
<input type="hidden" asp-for="Booking.Id" />
<div class="form-group">
<label asp-for="Booking.Name"></label>
<input asp-for="Booking.Name" class="form-control" />
<span class="text-danger" asp-validation-for="Booking.Name"></span>
</div>
<div class="form-group">
<label asp-for="Booking.Start">Start</label>
<input asp-for="Booking.Start" class="form-control" />
<span class="text-danger" asp-validation-for="Booking.Start"></span>
</div>
<div class="form-group">
<label asp-for="Booking.Duration">Duration</label>
<input asp-for="Booking.Duration" class="form-control" />
<span class="text-danger" asp-validation-for="Booking.Duration"></span>
</div>
<div class="form-group">
<label asp-for="Booking.MeetingSpace">Room</label>
<select data-value="true" data-va-required="The meeting space field is required" id="MeetingSpace.Id" name="MeetingSpace.Name">
#foreach (var meetingSpace in Model.meetingSpaces)
{
<option value="meetingSpace">#meetingSpace.Name</option>
}
</select>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
I am unsure how set this select dropdown to return the value to the Booking.MeetingSpace property. I can see the list of meetingSpace objects in the drop down but after selecting an option the meetingSpace field in the created/edited object is not returned as with the other properties in the form. I have also tried the same using the Booking.MeetingSpaceId int as well but it is still not populated after submission of the form.
it could be a binding problem try to change the name attribute value like this:
<select data-value="true" data-va-required="The meeting space field is required" id="Booking.MeetingSpace.Id" name="Booking.MeetingSpace.Name">
#foreach (var meetingSpace in Model.meetingSpaces)
{
<option value="#meetingSpace.Id">#meetingSpace.Name</option>
}
</select>
also option value should start with # to be recognized.
I'm showing the user a screen where he can check what fields he wants to get from the database. Based on the checked checkboxes I want to write a query using LINQ or lambda expression and fetch the data in ASP.NET MVC. How to do that as column selections are dynamic? For example, if only Name and Email columns are checked then get the data of those 2 columns only from the database.
Controller
public ActionResult Report()
{
return View();
}
[HttpPost]
public ActionResult Report(Employee emp)
{
List<Employee> employees = new List<Employee>();
employees = db.Employees.Select(x => new Employee()
{
// select Only those columns which are checked by the user
}).ToList();
return View();
}
View
#model IEnumerable<DynamicCheck.Models.Employee>
#{
ViewBag.Title = "EmployeeReport";
}
<h2>EmployeeReport</h2>
<form action="~/Employees/Report" method="post">
<div>
<div class="col-lg-3">
<input type="checkbox" name="Name" />
<label>Employee Name</label>
</div>
<div class="col-lg-3">
<input type="checkbox" name="Email" />
<label>Employee Email</label>
</div>
<div class="col-lg-3">
<input type="checkbox" name="Address" />
<label>Employee Address</label>
</div>
<div class="col-lg-3">
<input type="checkbox" name="Phone" />
<label>Employee Name</label>
</div>
<input type="submit" value="Submit"/>
</div>
</form>
you should to use javascript and check what columns sent to view.
and create html elements dynamically...
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
The Error view is only supposed to get returned if one or more fields in the form is null or empty, but it gets returned even if correct information is entered.
I have a method in my Home Controller that takes string parameters, and has an "if" statement that checks if each field in the form is null or empty. If null/empty, it's supposed to return the Error view that is stored in the shared folder. If not, it returns "Success," (a view file which I added to my Home View folder). However, the Success view is never hit, regardless of whether valid info is entered into the form. It returns the Error Page either way. I'm unsure if you can tell what the problem is from the code below, but here's my Index and Home Conntroller code. If there's something else you'd need to see, please let me know. Also, my apologies if this is not the right way to ask questions; I'm very new to MVC's and forums like this.
Below is the Home Controller code:
namespace InsuranceApp.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Quote(string firstName, string lastName, string emailAddress, string DateofBirth, string carYear, string carMake, string carModel, string speedingTickets, string dui, string coverage)
{
if (string.IsNullOrEmpty(firstName) || string.IsNullOrEmpty(lastName) || string.IsNullOrEmpty(emailAddress) || string.IsNullOrEmpty(DateofBirth) || string.IsNullOrEmpty(carYear) || string.IsNullOrEmpty(carMake) || string.IsNullOrEmpty(carModel) || string.IsNullOrEmpty(speedingTickets) || string.IsNullOrEmpty(dui) || string.IsNullOrEmpty(coverage))
{
return View("~/Views/Shared/Error.cshtml");
}
else
{
return View("Success");
}
}
}
}
INDEX CODE:
<div class="row no-gutters m-3">
<div class="card col-sm-12 col-md-10 col-lg-6 mx-auto shadow">
<div class="card-header text-center">
<h5 class="m-0">Auto Insurance Quote Generator</h5>
</div>
<div class="card-body">
#using (Html.BeginForm("Quote", "Home", FormMethod.Post))
{
<div class="row no-gutters">
<div class="form-group col-md-12">
<input name="FirstName" type="text" class="form-control" placeholder="First Name" />
</div>
<div class="form-group col-md-12">
<input name="LastName" type="text" class="form-control" placeholder="Last Name" />
</div>
<div class="form-group col-md-12">
<input name="EmailAddress" type="email" class="form-control" placeholder="Email Address" />
</div>
<div class="form-group col-md-12">
<input name="DateOfBirth" type="text" class="form-control" placeholder="Date of Birth MM/dd/yyyy" />
</div>
<div class="form-group col-md-12">
<input name="CarYear" type="text" class="form-control" placeholder="Car Year" />
</div>
<div class="form-group col-md-12">
<input name="CarMake" type="text" class="form-control" placeholder="Car Make" />
</div>
<div class="form-group col-md-12">
<input name="Car Model" type="text" class="form-control" placeholder="Car Model" />
</div>
<div class="form-group col-md-12">
<input name="SpeedingTickets" type="text" class="form-control" placeholder="How many speeding tickets do you have?" />
</div>
<div class="form-group col-md-12">
<input name="DUI" type="text" class="form-control" placeholder="Have you ever had a dui?" />
</div>
<div class="form-group col-md-12">
<input name="Coverage" type="text" class="form-control" placeholder="Would you like Full Coverage or Liability?" />
</div>
<button type="submit" class="btn btn-block btn-primary">Submit</button>
</div>
}
</div>
</div>
</div>
Your names in the Controller are not the same as the names in the html file.
In MVC you need the exactly the same name with lower and upper case letters.
If the name in the HTML file is 'Name' in the controller needs to be 'string Name' not 'string name'.
Hope that helps you.
I am a junior developer and i find it hard to get this form to work. What i am trying to achieve is a multistep form where each view is a form that redirects to the next view containing further more fields for the user to input values into. I Think i got it right how i pass the Model(which is to be modified for every step). I have 4 views and 4 ActionResults. Step1, Step2 etc.
So how do i pass both the model and the chosen value from "Choose amount" and the custom amount?
This is what the markup looks like:
<form method="post" id="formStepOne" action="#Url.Action("Step1", "SupporterController", Model)">
<div class="row">
<div class="large-6 columns">
<label>Choose amount</label>
<input type="radio" name="belopp1" value="500" id="value1"><label for="value1">100 dollars</label>
<input type="radio" name="belopp2" value="350" id="value2"><label for="value2">200 dollars</label>
<input type="radio" name="belopp3" value="200" id="value3"><label for="value3">400 dollars</label>
</div>
<div class="large-4 columns">
<label>
Amount(minimum of 400 dollars)
<input type="text" placeholder="amount" />
</label>
</div>
</div>
<div class="large-12 columns">
<div class="row collapse">
<div class="small-2 columns">
<button type="submit" form="formStepOne" value="Submit">Fortsätt</button>
</div>
</div>
</div>
And this is what the controllers/actionResults look like
[HttpPost]
public ActionResult Step2(SupporterViewModel model)
{
//Validate and return
return PartialView("~/Views/SupporterBlock/SupporterStepThree.cshtml", model);
}