I have scenario where I have load data on dropdown selection change and after manipulation I have to submit the page for saving.
I have developed the page but since I new to MVC so can anyone verify me code and can suggest better approach of doing the same.
#using (Html.BeginForm("Save", "forecast"))
{
using (Html.BeginForm("YearChange", "forecast", FormMethod.Get, new {#id="frmYearChange" }))
{
<div class="span12">
<div class="well well-sm" style="padding-bottom: 0px !important;">
<div class="span5">
<div class="control-group">
<label class="control-label" for="selectGroup">
Select Group:</label>
<div class="controls">
#Html.DropDownListFor(m => m.groupId, Model.groupList, "--Select Group--", new { #id = "selectGroup" })
</div>
</div>
</div>
<div class="span5">
<div class="control-group">
<label class="control-label" for="selectYear">
Select Year:</label>
<div class="controls">
#Html.DropDownListFor(m => m.yearId, Model.yearList, "--Select Year--", new { #id = "selectYear", onchange = "selectYear_indexChanged();" })
</div>
</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
}
.....
}
You can't have nested forms. You can however have multiple forms per view.
See W3C for more info.
Related
I have a view screen that has two different form on it, that will be activated differently. if the first button is clicked, the first form comes up and the user can fill and submit after which he proceed to click the other button to activate the other form which will then be submitted to a different table. I tried giving it different each submit button different name but my controller isn't recognizing the name. any help will be appreciated.
this is my view presently
<div class="container">
<form class="form-horizontal" role="form" method="post" id="head">
<div class="form-group">
<label for="warehouse" class="col-sm-2 control-label">Transaction type</label>
<div class="col-sm-7">
#Html.TextBoxFor(m => m.vwint0, ViewBag.action_flag == "Create" ? (object)new { #class = "form-control", style = "width : 120px", #maxlength = 10 } : new { #disabled = "disabled", style = "width : 120px" })
#Html.ValidationMessageFor(m => m.vwint0)
</div>
</div>
<div class="form-group">
<label for="code" class="col-sm-2 control-label">Customer code</label>
<div class="col-sm-7">
#Html.DropDownListFor(m => m.vwstring1, ViewBag.cus as SelectList, "Select", new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button type="submit" class="btn btn-primary" name="update" value="headsub">Submit</button>
</div>
</div>
</form>
<form class="form-horizontal" role="form" method="post" id="details">
<div class="form-group">
<label for="firstName" class="col-sm-2 control-label">Sale sequence number </label>
<div class="col-sm-9">
#Html.TextBoxFor(m => m.vwint0, new { #class = "form-control", style = "width : 80px", maxlength = 10 })
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Quote sequence</label>
<div class="col-sm-9">
#Html.TextBoxFor(m => m.vwstring9, new { #class = "form-control", style = "width : 80px", maxlength = 10 })
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Item code</label>
<div class="col-sm-9">
#Html.DropDownListFor(m => m.vwstring10, ViewBag.item as SelectList, "Select", new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button type="submit" class="btn btn-primary" name="update" value="detailsub">Submit</button>
</div>
</div>
</form>
</div>
In my controller, I tried this but my controller isn't even recognizing the button name.
if (update == "headsub")
{
AR_002_SALES gdoc = new AR_002_SALES();
gdoc.sale_sequence_number = glay.vwint0;
gdoc.customer_code = glay.vwstring1;
gdoc.currency_code = glay.vwstring2;
}
else
{
AR_002_QUOTE = new AR_002_QUOTE();
AR_002_QUOTE.sale_sequence_number = glay.vwint0;
AR_002_QUOTE.quote_sequence = glay.vwstring9;
AR_002_QUOTE.item_code = string.IsNullOrWhiteSpace(glay.vwstring10) ? "" : glay.vwstring10;
AR_002_QUOTE.quote_qty = glay.vwdclarray0[0];
AR_002_QUOTE.price = glay.vwdclarray0[1];
}
Instead of using <form class="form-horizontal" role="form" method="post" id="head">
use #using (Html.BeginForm("ActionMethod", "Controller", FormMethod.Post, new { #class = "form-horizontal" ,#id="head" }))
to submit a form and action method will process that form and does stuff.Similarly you can do for another form also.
In your .cshtml it looks like it will not hit any action method of that controller.
I am using Mvc 5 razor,and have used ckeditor to save data in database but when i am retrieving data on the view it is coming with all the html tags pls helpme how to display it in normal text form on the view
<div class="panel panel-default">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" id="Inclusions">
<div class="panel-heading">
<h4 class="panel-title"> INCLUSIONS </h4>
</div>
</a>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
#Html.Raw(Html.DisplayFor(Model => Model.Itinerarydetail.Inclusions));
</div>
</div>
</div>
When you use the Html.DisplayFor helper method, razor will encode the content before rendering. You should use Html.Raw() helper method which will not encode your content and pass the value you want to render directly to that.
<div class="panel-body">
#Html.Raw(Model.Itinerarydetail.Inclusions)
</div>
Here in my view when you get data from database use #Html.Raw
<div class="form-group">
#Html.LabelFor(model => model.Description,htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-sm-8">
<textarea type="text" class="ckeditor" name="Description">#item.Description</textarea>
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
Is it possible to put the model properties in this styled login form? I don't know where to put the lambda helpers (x=>x.email, x=>x.password etc). Any help is appreciated.
#model User
#using (Html.BeginForm("LogIn", "Account", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
<div class="container">
<div class="row">
<p><br></p>
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Welcome Back! Please Sign In</h3>
</div>
<div class="form-group">
#Html.LabelFor(x => x.Username)
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
#Html.EditorFor(x => x.Username, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(x => x.Password)
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
#Html.EditorFor(x => x.Password, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<hr />
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> Login</button>
<div>
<h3 class="page-header">No Account? Sign Up, Its Free</h3>
</div>
<button type="button" class="btn btn-primary" />
Sign Up
<span class="glyphicon glyphicon-check"></span>
</div>
</div>
</div>
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Edit:
the problem is now that i can't apply the wanted style on the input
i tried adding
#Html.EditorFor(x => x.Username, new { htmlAttributes = new{#class = "form-control"}}) and this also #Html.EditorFor(x => x.Username, new { #class = "form-control"}) and both doesnt work.
with adding above i`m trying to get this style:
but instead i'm getting these unstyled input boxes
2nd EDIT:
Instead of using :
#Html.EditorFor(x => x.Username, new { htmlAttributes = new { #class = "form-control" } })
I tried :
#Html.TextBoxFor(x => x.Username, new { #class = "form-control" })
and with this i'm getting the desired style, so i don`t exactly know the difference between Html.EditorFor and Html.TextBoxFor and if using Html.TextBoxFor is a good solution, maybe someone can clarify this.
As long as your Model is declared you can just change it to this:
<div class="container">
<div class="row">
<p><br></p>
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Welcome Back! Please Sign In</h3>
</div>
<form role="form" method="post" action="/Users/LogIn">
<div class="form-group">
#Html.LabelFor(x => x.Username)
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
#Html.EditorFor(x => x.Username)
</div>
</div>
<div class="form-group">
#Html.LabelFor(x => x.Password)
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
#Html.EditorFor(x => x.Password)
</div>
</div>
<hr />
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> Login</button>
<div>
<h3 class="page-header">No Account? Sign Up, Its Free</h3>
</div>
<button type="button" class="btn btn-primary">
Sign Up
<span class="glyphicon glyphicon-check"></span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
Also instead of using <form role="form" method="post" action="/Users/LogIn"> you can do the following:
#using (Html.BeginForm("LogIn", "Users", FormMethod.Post))
{
// DisplayFor and EditorFor code
}
You can read about the differences between and EditorFor and a TextBoxFor Here
this is my actionResult
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public ActionResult Payment(PaymentViewModel payment, string returnUrl)
{
PaymentModel paymentModel = new PaymentModel();
if (ModelState.IsValid)
{
CreditCardDetailsModel creditCardDetailsModel = new CreditCardDetailsModel();
creditCardDetailsModel.SecurityId = payment.SecurityId;
creditCardDetailsModel.ExpiryDate = payment.Month + payment.Year;
creditCardDetailsModel.CardNumber = payment.CardNumber;
paymentModel.CreditCardDetails = creditCardDetailsModel;
TempData["model"] = paymentModel;
return RedirectToAction("Payment");
}
var query = from state in ModelState.Values
from error in state.Errors
select error.ErrorMessage;
var errorList = query.ToList();
TempData["ErrorMessages"] = errorList;
ViewBag.MonthList = new SelectList(new[] { "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" });
return new EmptyResult();
}
This is my partialView
#model Centra.Web.ViewModels.PaymentViewModel #using (Html.BeginForm("Payment", "Flight", FormMethod.Post,null))
{
#Html.AntiForgeryToken()
<div class="row space-form traveller-form">
<div class="col-lg-12">
<div class="col-lg-3 row">
<div class="fomr-group text-right">
<label>Credit Card No</label>
</div>
</div>
<div class="col-lg-8">
<div class="fomr-group col-lg-5 cardDetails">
#Html.TextBoxFor(p => p.CardNumber, new { #class = "form-control" })
</div>
<div ng-if="creditCardError == true" class="fomr-group col-lg-2 cardDetails">
<label>Please enter valid card number</label>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-3 row">
<div class="fomr-group text-right">
<label>Expiry Date</label>
</div>
</div>
<div class="col-lg-8">
<div class="fomr-group col-lg-2 cardDetails ">
#Html.DropDownListFor(m=>m.Month, (SelectList)ViewBag.MonthList)
</div>
<div class="fomr-group col-lg-3 cardDetails row">
#Html.DropDownListFor(p => p.Year, Enumerable.Range(DateTime.Now.Year, 20)
.Select(x => new SelectListItem
{
Text = x.ToString(),
Value = x.ToString()
}
), new { #class = "form-control" })
</div>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-3 row">
<div class="fomr-group text-right">
<label>Name on card</label>
</div>
</div>
<div class="col-lg-8">
<div class="fomr-group col-lg-5 cardDetails">
#Html.TextBoxFor(p => p.NameOnCard, new { #class = "form-control" })
</div>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-3 row">
<div class="fomr-group text-right">
<label>CVV</label>
</div>
</div>
<div class="col-lg-8">
<div class="fomr-group col-lg-2 cardDetails">
#Html.TextBoxFor(p => p.SecurityId, new { #maxlength = "4", #class = "form-control", #placeholder = "CVV" })
</div>
<div class="fomr-group col-lg-5 cardDetails TotalPrice">
<label>The 3 digit number printed on the back of card</label>
</div>
</div>
</div>
<div class="col-lg-12 terms-conditions">
<div class="col-sm-11 col-lg-offset-1">
<div class="checkbox">
<label>
#* #Html.CheckBox("paymentCheckbox", new { #onclick = "function-to-open-dialog()" })*#
<input type="checkbox" id="paymentCheckbox" ng-model="paymentCheckbox">
I understand and agree to the rules and notifications of this fare, the booking privacy policy and the terms & conditions Centra Travels.
</label>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-2 row">
<div class="fomr-group text-right">
</div>
</div>
<div class="col-lg-9 row">
<div class="fomr-group TotalPrice">
<label>
<h3>$ 36,613</h3>
<span>(Total inclusive all taxes)</span>
</label>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="col-lg-2 row">
<div class="fomr-group text-right">
</div>
</div>
<div class="col-lg-2 row">
<div class="fomr-group text-right col-lg-2">
#*<button type="submit" ng-disabled="!paymentCheckbox" ng-click="Payment(PaymentDetails)" class="btn btn-info makePaymentbtn">Make a Payment</button>*#
<button type="submit" ng-disabled="!paymentCheckbox" class="btn btn-info makePaymentbtn">Make a Payment</button>
</div>
#Html.Hidden("returnUrl", this.Request.RawUrl)
</div>
</div>
</div>
}
And other partialPages are not in mvcRazor formate their are in angular, so when i redirect to specific view(FlighBooking) //FlightBooking is my mainView in that multiple partial views are their, it is rending the FlightBooking View with but angular partialview are losing its states, so i tried by returning as return new EmptyResult(); but the page state is loosing, what should i do?
I want to bee on that same page without loosing its state if validations fails
If you don't want to refresh your page after go to action, you should use #Ajax.BeginForm instead #Html.BeginForm. There are a lot of tutorials on the internet.
In my form I use the DateTimePicker from Kendo UI. When I press the submit button the focus of the DateTimePicker is triggered and not the form submit event.
#using (Html.BeginForm("Edit", "NursingHome", FormMethod.Post, new { #class = "form-horizontal", #role = "form" }))
{
#Html.AntiForgeryToken()
<div class="form-group">
#Html.LabelFor(model => model.ShortTimeCare, new { #class = "col-xs-4 col-sm-3 col-md-2 col-lg-2 control-label" })
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-user"></span></span>
#(Html.Kendo().NumericTextBoxFor(model => model.ShortTimeCare)
.Format("n0")
.Min(0)
)
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
#(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
.Name("ShortTimeCareForDate")
.Value(DateTime.Now)
.Interval(15)
)
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-4 col-sm-offset-3 col-md-offset-2 col-lg-offset-2 col-xs-10 col-sm-10 col-md-2 col-lg-2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</div>
}
Have I forgotten something?
In my ViewModel I have a DateTime attribute.
public DateTime ShortTimeCareForDate { get; set; }
When I press the submit button the Curser jumps into the DateTimePicker Field. Nothing else happens.
When I change the code as following the submit event works as desired. (Maybe a Problem with the DateTime Attribute in the Model)
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
#(Html.Kendo().DateTimePicker() // For(model => model.ShortTimeCareForDate)
.Name("ShortTimeCareForDateXXXXX")
.Value(DateTime.Now)
.Interval(15)
)
</div>
regards,
Marko
When I use the english dateformat then it works. But I need the german format.
English:
#(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
.Name("ShortTimeCareForDate")
.Value(DateTime.Now)
.Format("yyyy-MM-dd hh:mm:ss")
.Interval(15)
)
German
#(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
.Name("ShortTimeCareForDate")
.Value(DateTime.Now)
.Format("dd.MM.yyyy hh:mm:ss")
.Interval(15)
)
Use button type="button" instead of using submit
<div class="form-group">
<div class="col-xs-offset-4 col-sm-offset-3 col-md-offset-2 col-lg-offset-2 col-xs-10 col-sm-10 col-md-2 col-lg-2">
<button type="button" class="btn btn-default">Save</button>
</div>
</div>
looks like you are using the wrong culture either on the client or on the server side.
according to http://docs.telerik.com/kendo-ui/aspnet-mvc/globalization you have to set the german culture like follows:
include the culture you want to use right under ~/Scripts/cultures/kendo.culture.de-DE.min.js
in your Layout.cshtml include the culture:
<script src="#Url.Content("~/Scripts/cultures/kendo.culture.de-DE.min.js")"></script>
and set it afterwards:
<script>
kendo.culture("de-DE");
</script>
if you want to set the culture on the server side you need to update your web.config like that:
<system.web>
<globalization uiCulture="de-DE" culture="de-DE"></globalization>
</system.web>
this should fix the occurring issue