I am trying to let a user create an object and save it to the database. I have scaffolded it all correctly etc and have modified my control to the following:
Function Create(id As Integer) As ViewResult
ViewBag.id = id
Dim job As Job = New Job
job.CustomerId = id
job.JobAmount = 0
job.JobDate = Date.Now()
job.JobStatus = "Active"
Return View(job)
End Function
This then returns the following view:
#ModelType Laundry.Job
#Code
ViewData("Title") = "Create"
End Code
<h2>Create</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>Job</legend>
<div class="editor-label">
#Html.LabelFor(Function(model) model.JobDate)
</div>
<div class="editor-field">
#Html.EditorFor(Function(model) model.JobDate)
#Html.ValidationMessageFor(Function(model) model.JobDate)
</div>
<div class="editor-label">
#Html.LabelFor(Function(model) model.BillId)
</div>
<div class="editor-field">
#Html.EditorFor(Function(model) model.BillId)
#Html.ValidationMessageFor(Function(model) model.BillId)
</div>
<div class="editor-label">
#Html.LabelFor(Function(model) model.CustomerId)
</div>
<div class="editor-field">
#Html.EditorFor(Function(model) model.CustomerId)
#Html.ValidationMessageFor(Function(model) model.CustomerId)
</div>
<div class="editor-label">
#Html.LabelFor(Function(model) model.JobStatus)
</div>
<div class="editor-field">
#Html.EditorFor(Function(model) model.JobStatus)
#Html.ValidationMessageFor(Function(model) model.JobStatus)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
End Using
<div>
#Html.ActionLink("Back to List", "Index")
</div>
I created a instance of job and passed it through the controller to the view in order to default certain values. Specifically I need to create a job object with the id passed to the controller but I do not want the user to be able to edit this id (they should not see this). I thought that if I simply deleted the following from my view:
<div class="editor-label">
#Html.LabelFor(Function(model) model.CustomerId)
</div>
<div class="editor-field">
#Html.EditorFor(Function(model) model.CustomerId)
#Html.ValidationMessageFor(Function(model) model.CustomerId)
</div>
The object would still save with the customerId I set in my controller however it seems if I delete this code when it saves it saves the customerid as 0 and when its there it works correctly but the user can see and edit it.
Am I doing this correctly?
I do not want the user to be able to edit this id (they should not see this)
Use #Html.HiddenFor(Function(model) model.CustomerId) for this. It will persist the value from view to controller, but not be visible to the user.
Related
Hi
i have try to loop throw data in "Categories" Table and it works - i got data when i open View in first time but if i click on a tab to see its content i got only first record ?
i don't know why i lose all data i got in first time ?
Razor Code:
#section personAds{
<h2 class="title text-center">Person Ads</h2>
<div class="col-sm-12">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Cars</li>
</ul>
</div>
<div class="tab-content">
#foreach (var personItems in Model.Where(isCompany => isCompany.isCompany == false))
{
<div class="tab-pane fade active in" id="propertytab">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfoslide text-center">
<img src="#Url.Content(personItems.catImage)" alt="" />
<h4>#personItems.catName</h4>
<i class="#personItems.classIcon"></i>More
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="carstab">
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfoslide text-center">
<img src="#Url.Content(personItems.catImage)" alt="" />
<h4>#personItems.catName</h4>
<i class="#personItems.classIcon"></i>More
</div>
</div>
</div>
</div>
</div>
}
</div>
}
Controller Code:
public ActionResult Contact()
{
var model = _db.Categories.ToList();
return View(model);
}
and i try to remove where condition and i got same result - when i click on any tab i got only first record ?!
Please see the Video of Problem ... Click Here
From the look of your code I think you have simply got your 'foreach' in the wrong position.
It looks like you are creating repeated 'tab' DIV's which will each have just one record in.
This is probably somewhat better, notice I have moved the 'propertytab' outside of the #foreach
<div class="tab-pane fade active in" id="propertytab">
#foreach (var personItems in Model.Where(isCompany => isCompany.isCompany == false))
{
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfoslide text-center">
<img src="#Url.Content(personItems.catImage)" alt="" />
<h4>#personItems.catName</h4>
<i class="#personItems.classIcon"></i>More
</div>
</div>
</div>
</div>
}
</div>
<div class="tab-pane fade" id="carstab">
#foreach (var personItems in Model.Where(isCompany => isCompany.isCompany == false))
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfoslide text-center">
<img src="#Url.Content(personItems.catImage)" alt="" />
<h4>#personItems.catName</h4>
<i class="#personItems.classIcon"></i>More
</div>
</div>
</div>
</div>
}
</div>
I'm working on a MVC 4 exercise project where I've multiple partial views and when I submit on one of this the entire page validates. I want that every button validates only their own forms.
The page looks like this:
This a partial views example:
#model Money.Models.Category
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
#using (Html.BeginForm("Create", "Category", FormMethod.Post, new { id = "createCategoryForm" }))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Category</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<p>
<input id="createCategorySubmit" type="submit" value="Create" />
</p>
</fieldset>
}
And this a part of the entire view:
#model Money.Models.Transaction
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Transaction</legend>
<div class="editor-label">
#Html.LabelFor(model => model.CategoryId, "Category")
</div>
<div class="editor-field">
#Html.DropDownList("CategoryId", String.Empty)
#Html.ValidationMessageFor(model => model.CategoryId)
</div>
<div id="createCategory">
#Html.Partial("~/Views/Shared/_CreateCategory.cshtml")
</div>
<div class="editor-label">
#Html.LabelFor(model => model.AccountId, "Accout")
</div>
<div class="editor-field">
#Html.DropDownList("AccountId", String.Empty)
#Html.ValidationMessageFor(model => model.AccountId)
</div>
<div id="createAccount">
#Html.Partial("~/Views/Shared/_CreateAccount.cshtml")
</div>
Have you some idea?
Thank you
You have to parse the new content with the validator:
$('form').data('validator', null);
$.validator.unobtrusive.parse($('form'));
How can i trigger the submit button from partial view without using Html.BeginForm tag in Partial View. Reason being when there are two form tags, that is in main view and partial view, the validation doesn't work.
The important thing is that I want the validation to work.
My Partial View code:
<div id="AddMe">
<div class="row">
#Html.LabelFor(model => model.FirstName)
#Html.TextBoxFor(model => model.FirstName)
#Html.ValidationMessageFor(model => model.FirstName) // this should work
</div>
</div>
<div>
<input name="submit" type="submit" id="submit" value="Save" /> // how do i trigger this from partial view
</div>
My Main View code:
#using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post))
{
<div class="modal" id="modalId" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body" id="modalbodyId">
#Html.Partial("PartilViewName")
</div>
<div class="modal-header">
<button type="submit">
</div>
</div>
</div>
</div>
}
For Validation purpose, I have added the following lines of code in Main View.
$("#modalId").click(function () {
var form = $("#modalbodyId").closest("form");
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);
$.ajax({
url: "/ControllerName/ActionName",
type: "POST",
data: $("#modalbodyId").serialize(),
cache: false
});
});
Also just for the records all the models and other Annotations are in place.
Note: Do i need to add the unobtrusive/ajax code inside Partial View.
I have view that has CompanyTable partial view. So this partial view has a CreateBankAccount partial view. Last partial view codes are
#model Invoice.Model.BankAccount
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
Launch demo modal
<div id="#Model.TaxID" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
#using (Ajax.BeginForm("CreateModal", "CompanyController", new AjaxOptions { UpdateTargetId = "modal", HttpMethod = "post" }))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>BankAccount</legend>
#Html.HiddenFor(model => model.ID)
<div class="editor-label">
#Html.LabelFor(model => model.BankName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.BankName)
#Html.ValidationMessageFor(model => model.BankName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.CorrespondentAccount)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.CorrespondentAccount)
#Html.ValidationMessageFor(model => model.CorrespondentAccount)
</div>
<input type="submit" value="save" />
</fieldset>
}
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<input type="submit" class="btn btn-primary" value=" Save changes" data-dismiss="modal" />
</div>
</div>
so this partial view is modal popup. My problem is that when I want to creat bankAccount my HttpPost method doesn't work, and I return Index action. How I can fix it?
I am trying to set a default value for the scaffold create view that MVC created for me. I have tried creating an instance of the model and passing it to the view but its throwing errors.
Function Create(id As Integer) As ViewResult
Dim job As Job
job.CustomerId = id
Return View(job)
End Function
How would I get my create view to be prepopulated with the id in the parameter using the following view so when a new Job is created it is automatically created with that customer id. My view is below:
#ModelType Laundry.Job
#Code
ViewData("Title") = "Create"
End Code
<h2>Create</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>Job</legend>
<div class="editor-label">
#Html.LabelFor(Function(model) model.JobDate)
</div>
<div class="editor-field">
#Html.EditorFor(Function(model) model.JobDate)
#Html.ValidationMessageFor(Function(model) model.JobDate)
</div>
<div class="editor-label">
#Html.LabelFor(Function(model) model.CustomerId)
</div>
<div class="editor-field">
#Html.EditorFor(Function(model) model.CustomerId)
#Html.ValidationMessageFor(Function(model) model.CustomerId)
</div>
<div class="editor-label">
#Html.LabelFor(Function(model) model.BillId)
</div>
<div class="editor-field">
#Html.EditorFor(Function(model) model.BillId)
#Html.ValidationMessageFor(Function(model) model.BillId)
</div>
<div class="editor-label">
#Html.LabelFor(Function(model) model.JobStatus)
</div>
<div class="editor-field">
#Html.EditorFor(Function(model) model.JobStatus)
#Html.ValidationMessageFor(Function(model) model.JobStatus)
</div>
<div class="editor-label">
#Html.LabelFor(Function(model) model.JobAmount)
</div>
<div class="editor-field">
#Html.EditorFor(Function(model) model.JobAmount)
#Html.ValidationMessageFor(Function(model) model.JobAmount)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
End Using
<div>
#Html.ActionLink("Back to List", "Index")
</div>
I don't necessarily even need to show the customer id on the form but that new object needs to be created with the parameter passed to the controller and the rest of the info the user chooses.
Method 1 : If you want to show the customerId, then you can use the following code...
<div class="editor-label">
#Html.LabelFor(Function(model) model.CustomerId)
</div>
This way, the CustomerId will be displayed, user cannot change it and when postback is done, this value is still present as a part of the model.
Method 2 : If you dont want to display, but still use it for the above purpose, then use the code written below...
<div class="editor-label">
#Html.HiddenFor(Function(model) model.CustomerId)
</div>
Hope this is what you wanted.