I'm making a asp.net mvc website and I'm trying to add a Date time picker for one of my model attributes in a form in my view. At the moment a datepicker displays but when I pick a date and submit the form the data is not saved. Before I tried adding a date picker the information saved so I believe the date picker is causing my problem. How exactly should a date picker be added to an HTML Form and should I use the jQuery UI datepicker or one of the many other ones available online? I've no experience with jQuery so it may be that I don't understand how datepicker works or haven't got the right js scripts. Thanks!!
<head>
<title>Create</title>
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui- lightness/jquery-ui.min.css" />
</head>
<h2>Create</h2>
#using(Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Event</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Location, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Location, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Location, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Date, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Date, new {id = "news_date"})
#Html.ValidationMessageFor(model => model.Date, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.StartTime, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.StartTime, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.StartTime, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<script>
$(document).ready(function () {
$("##Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery- ui.min.js"></script>
My controller method, which is invoked when the form is submitted, looks like this
public ActionResult Create([Bind(Include = "EventID,Name,Location,Date,StartTime")] Meeting #meeting)
{
if (ModelState.IsValid)
{
context.Meetings.Add(#meeting);
context.SaveChanges();
return RedirectToAction("Index");
}
return View();
}
Change the dateFormat to use the default from:
$("##Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'dd/mm/yy' });
to
$("##Html.IdFor(m => m.Date)").datepicker();
or
$("##Html.IdFor(m => m.Date)").datepicker({ dateFormat: 'mm/dd/yy' });
Please note that in order to fix it, you need to specify Month/Day/Year instead of Day/Month/Year. This is because the server side is expecting mm/dd/yy but the client side is providing dd/mm/yy.
EditorFor is rendered like: <input type="date" data-val="..." ... />
In Chrome the EditorFor rendered a datepicker default, but IE this is not working.
I suggest you try use #Html.TextBoxFor(model => model.Date, new {#type = "Date"}) and add in your script something like this:
$(function () {
$('#Date').datepicker();
});
Related
I have an online form which the applicants need to fill in. Some of the options is to check whether they are applying as multilateral or bilateral, and I am not sure how to make this happen in ASP.NET MVC?
I know I have to code it in a manner so that when one of them is checked, the other will be unchecked (i.e. setting the other to false when one is checked)
I tried doing so by using an id in the create.cshtml file and then included some code in the controller but did not work, because I am not sure how to include the attributes(?).
Could you please help me? I am sure it is just me being a newbie and not really that difficult.
below is from the razor pages
<div class="form-group">
#Html.LabelFor(model => model.Multilateral, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div ID="chkMu" oncecheckedchanged="chkMu_CheckedChanged" class="checkbox">
#Html.EditorFor(model => model.Multilateral)
#Html.ValidationMessageFor(model => model.Multilateral, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Bilateral, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div ID="chkBi" oncecheckedchanged="chkBi_CheckedChanged" class="checkbox">
#Html.EditorFor(model => model.Bilateral)
#Html.ValidationMessageFor(model => model.Bilateral, "", new { #class = "text-danger" })
</div>
</div>
</div>
below is from the controller
protected void chkBi_CheckedChanged(object sender, EventArgs e, object chkMu)
{
chkMu.Checked = false;
}
protected void chkMu_CheckedChanged(object sender, EventArgs e, object ckhBi)
{
chkBi.Checked = false;
}
I also found some code online which suggested writing it in javascript and using jQuery, but I do not know how to implement it still. Below is the code
$('div .checkbox').click(function () {
var checkedState = $(this).prop("checked")
$(this)
.parent('div')
.children('.checkbox:checked')
.prop("checked", false);
$(this).prop("checked", checkedState);
});
really appreciate any and all help!
Here is a working demo with jquery:
View:
<form asp-action="Create" asp-controller="Lead">
<div class="form-group">
#Html.LabelFor(model => model.Multilateral, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div oncecheckedchanged="chkMu_CheckedChanged" >
<input type="checkbox" id="chkMu" name="chkMu"/>
#Html.EditorFor(model => model.Multilateral)
#Html.ValidationMessageFor(model => model.Multilateral, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Bilateral, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div oncecheckedchanged="chkBi_CheckedChanged">
<input type="checkbox" id="chkBi" name="chkBi"/>
#Html.EditorFor(model => model.Bilateral)
#Html.ValidationMessageFor(model => model.Bilateral, "", new { #class = "text-danger" })
</div>
</div>
</div>
<input type="submit" />
</form>
jquery:
#section scripts{
<script>
$("input[type='checkbox']").click(function () {
if (this.checked&&this.id == "chkMu")
{
$('#chkBi').prop('checked', false);
} else if (this.checked && this.id == "chkBi")
{
$('#chkMu').prop('checked', false);
}
})
</script>
}
result:
I'm new to MVC asp.net jquery ajax and hoping you guys can help me give insight on my problem.
Thank you so much any answer would be helpful.
I'm just having a self exercise that i saw on some online group to help me gain more knowledge on how to implement jquery on asp.net mvc any advice would help.
Controller
public JsonResult AddJob(jobdetail job)
{
using(jQueryAjaxEntities db = new jQueryAjaxEntities())
{
db.jobdetails.Add(job);
db.SaveChanges();
return Json("Success");
}
}
Heres my AddJob view
Whenever I remove the script src it's saving normally, can anyone explain me why is it like that?
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function () {
$("#btnSave").click(function () {
var JobModel = {
TaskName: $("Task_Name").val(),
Description: $("Description").val(),
DateStarted: $("Date_Started").val(),
DateFinished: $("Date_Finished").val(),
Status: $("Status").val()
};
$.ajax({
type: "POST",
url: "/Home/AddJob",
dataType: "json",
contentType: "application/json",
data: JSON.stringify({ job: JobModel }),
success: function (response) {
window.location.href = "/Home/Index"
}
});
});
});
</script>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.JobID)
<div class="form-group">
#Html.LabelFor(model => model.Task_Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Task_Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Task_Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Date_Started, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Date_Started, new { htmlAttributes = new { #class = "form-control", #type = "date" } })
#Html.ValidationMessageFor(model => model.Date_Started, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Date_Finished, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Date_Finished, new { htmlAttributes = new { #class = "form-control", #type = "date" } })
#Html.ValidationMessageFor(model => model.Date_Finished, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Status, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Status, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Status, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group" id="DivSave">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Submit" id="btnSave" class="btn btn-default" />
</div>
</div>
</div>
}
You are probably hitting your AddJob Action twice. First, the btnSave button is clicked, and by the jquery event, you post your data with ajax. Then, your form submits the data to your AddJob Action as well. And a duplicate record is inserted.
You posting your form twice.
1.#(Html.BeginForm()) Post call as button type is submit.
which is working fine and inserting proper data.
2.jQuery AJAX Post Call.
Missing # for getting values of fields.
So, It inserting Null data.
Code:
TaskName: $("Task_Name").val()
It should be:
TaskName: $("#Task_Name").val()
If you made this changes then it will insert data twice.
So, You need to post form once only.
This can be done:
Change Button type sumit to button. This will avoid post call of form begin.
Remove Jquery post code.
I will suggestions Remove AJAX call code post your form using form post only.
I've been trying to get this problem fixed for several hours now, but can't seem to find out what's wrong here.
I have a view with a few fields that I want to post to my controller. Now, I want to check for validation errors on the client side. I've used this in several projects before by adding:
- jquery.js (version 1.12.1)
- jquery.validate.js (version 1.14.0)
- jquery.validate.unobtrusive.js (version 3.2.3)
- jquery-unobtrusive-ajax.js (version 3.2.3)
As soon as a I reference jquery.validate.unobtrusive.js, the client sided validation works. But when I press the submit button, it just won't submit the form anymore. It just won't hit the controller.
My view is as following:
<div class="row">
<div class="col-md-12">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<span class="caption-subject bold uppercase font-dark">Auto toevoegen</span>
</div>
<div class="actions">
#Html.ActionLink("Terug", "Index", null, new { #class = "btn btn-circle green btn-outline btn-sm" })
</div>
</div>
<div class="portlet-body">
#using (Html.BeginForm("Create", "Car", FormMethod.Post, new { #class = "form-horizontal" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true)
#Html.HiddenFor(model => model.Id)
<div class="form-group">
#Html.LabelFor(model => model.Merk, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Merk, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Merk)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Type, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Type, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Type)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Kenteken, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Kenteken, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Kenteken)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Kilometervergoeding, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Kilometervergoeding, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Kilometervergoeding)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Name, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.AccountNumber, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.AccountNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AccountNumber)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DefaultCar, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DefaultCar)
#Html.ValidationMessageFor(model => model.DefaultCar)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Opslaan" class="btn blue" />
#Html.ActionLink("Annuleren", "Index", null, new { #class = "btn btn-white" })
</div>
</div>
</div>
}
</div>
</div>
</div>
My controller action looks like this:
[HttpPost]
[DisableValidation]
public ActionResult Create(CarViewModel model)
{
if(!ModelState.IsValid)
{
return View(model);
}
try
{
var tblCar = mapper.Map<CarViewModel, tblCar>(model);
_carAppService.Insert(tblCar);
return RedirectToAction("Index");
}
catch(Exception ex)
{
//Add proper error messages
Logger.Debug("Error occured during car adding process: " + ex.InnerException);
//add common container with errors
TempData["Error"] = "Er is iets fout gegaan :(";
return RedirectToAction("Index");
}
}
The scripts are loading in a bundle on startup and are loading in the order stated above. Now as soon as I remove the jquery.validate.unobtrusive from my bundle config, the submit button works. The client sided validation doesn't work anymore then though.
Does any know what's going on here? Thanks!
Alright I fixed the problem!
This answer will most likely only be useful is you make use of ASP.NET Boilerplate Zero template.
In ~/Common/Scripts a Javascript file was added (jquery-validation-custom.js).
The content messed with the submit button. I replaced it with my own version of a custom validation handler for modals and now it works!
I have a Form that creates an entry into my database. I am trying to add an additional form via a modal that will allow the user to populate the first form by searching a property on the webservice.
What I need is for when the user types hits search in the modal it will call an action on controller that then runs my web service client that then returns a list of appropriate information. I then want this list displayed as a table on the page. The user can then select which search result they want to use to which will then populate the original form. I think I can figure most of this out but wasnt sure of the best way to kick off the search from the modal. Code is as follows.
View
#model *******
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#Search">Populate From Service</button>
<!-- Modal -->
<div id="Search" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Search By Property</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<p>blah blah blah</p>
<div class="form-group">
<label for="API14" class="control-label col-md-2">API</label>
<div class ="col-md-10">
<input type="text" class="form-control" id="API14" aria-describedby="API14" placeholder="Enter API">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Search" class="btn btn-success" />
<input type="button" value="Close" data-dismiss="modal" class="btn btn-danger" />
</div>
</div>
</div>
</div>
</div>
</div>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.API14, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.API14, new { htmlAttributes = new { #class = "form-control"} })
#Html.ValidationMessageFor(model => model.API14, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PROP_NO, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PROP_NO, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PROP_NO, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PROP_NM, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PROP_NM, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PROP_NM, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ENTITY, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10 ">
#Html.EditorFor(model => model.ENTITY, new { htmlAttributes = new { #class = "form-control" } } )
#Html.ValidationMessageFor(model => model.ENTITY, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PROD_ZONE_NM, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PROD_ZONE_NM, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PROD_ZONE_NM, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.LEASE_NAME, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LEASE_NAME, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LEASE_NAME, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.WELL_NO, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.WELL_NO, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.WELL_NO, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-success" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
You could divide your issue into two steps.
Step 1: "What I need is for when the user types hits search in the modal it will call an action on controller that then runs my web service client that then returns a list of appropriate information. I then want this list displayed as a table on the page."
Add the following to your scripts section:
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script>
$(document).ready(function () {
$('#submitModal').click(function () {
var data = {
API14: $('#API14').val()
}
$.ajax({
url: '/Default/SearchByProperty',
data: data
}).success(function (html) {
$('#API14List').html(html);
$('#Search').modal('toggle');
});
});
});
</script>
}
This is a simple ajax call that takes the value from you modal input and submits to the server. Note the "url" parameter passed in the call as this will need to match your "/{controller}/{action}". Important: You will also need to update your "Search" button#API14 to type "button", not "submit", as this will avoid a postback which is undesired when making AJAX calls.
You can then add something like this to your controller:
public ActionResult SearchByProperty()
{
var model = new List<string>();
model.Add("one");
model.Add("two");
model.Add("three");
return PartialView(model);
}
... which will require the following in a partial view file I named SearchByProperty.cshtml:
#model List<string>
<table>
#foreach (var item in Model) {
<tr class="API14-item">
<td>#item</td>
</tr>
}
</table>
Step 2: "The user can then select which search result they want to use to which will then populate the original form. I think I can figure most of this out but wasnt sure of the best way to kick off the search from the modal. Code is as follows."
If you are confident in writing jQuery, then you should be able to write some js in the scripts section of your create page that will take the values you place in your table and populate your form:
$(document).on('click', '.API14-item', function () {
//
// TODO: your code here
//
});
Hope this helps!
I have a view which contains two partial views. One to select a customer and one to create a new customer both shown within tabs on the parent page. If somebody selects a customer, and then continues with the data entry form, but then has to go back to create a new customer instead, then the data from the selected customer remains. I can replace the data by entering the new data, however, the important bit is that the customer id remains and therefore none of the other data is taken into account. Is there a way for me to reset the customer object on click of e.g. an edit button without losing data from the rest of the page?
My parent view (relevant section) is:
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-12">
#if (Model.CommunicationModel.Communication.Customer.Name == null)
{
<input id="btnCust" type="button" value="Select" class="btn btn-default selectCustomer" />
}
else
{
<span id="custSpan" style="font-size:16px; font:bold;">
#Html.DisplayFor(model => model.CommunicationModel.Communication.Customer.Name)
#Html.HiddenFor(model => model.CommunicationModel.Communication.Customer.CustomerId)
<input id="btnEditCust" type="button" value="Edit" class="btn btn-default selectCustomer" />
</span>
}
<div id="customerTabs" style="display:none;">
<hr />
<p>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Select Customer</li>
<li role="presentation">Create New Customer</li>
</ul>
</p>
<div class="tab-content">
<div id="tabs-1" role="tabpanel" class="tab-pane active">
#Html.Partial("~/Views/Communication/SelectCustomer.cshtml", Model.CustomerViewModel.AllCustomers)
</div>
<div id="tabs-2" role="tabpanel" class="tab-pane">
#Html.Partial("~/Views/Communication/CreateCustomer.cshtml", Model)
</div>
</div>
</div>
</div>
</div>
And my create customer partial view is:
#model CommunicationsLog.ViewModels.CommunicationViewModel
<div class="form-horizontal" id="addCustomerForm">
<div class="row">
<div class="col-md-12">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.Name, new { htmlAttributes = new { #class = "form-control" }, #id = "name" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, new { htmlAttributes = new { #class = "form-control" }, #id = "email" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.ContactTel, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.ContactTel, new { htmlAttributes = new { #class = "form-control" }, #id = "phone" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.ContactTel, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.CompanyName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.CompanyName, new { htmlAttributes = new { #class = "form-control" }, #id = "company" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.CompanyName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Address, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.Address, new { htmlAttributes = new { #class = "form-control" }, #id = "address" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.Address, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
Any help would be greatly appreciate. Im stumped :)
You're using Partials, meaning the html already been loaded and rendered when it reach the client.
To handle the case of Id is being sent, you should mark ..Customer.CustomerId has disabled="disabled" or readonly, this will avoid the Client side of submitting the Input tag, which will result of the Server side "think" (If you implemented it in that fashion) that this is a new customer.
You can easily achieve it using jQuery 1.6+:
$('#TheCustomerId').prop('disabled', true);
$('#TheCustomerId').prop('disabled', false);
Disable on < 1.6: Disable/enable an input with jQuery?