Related
I have a button which add individualSearch partial view and individualSearch partial view also have a add button which adds individualSearcharacteristic partial view in it.
I want to bind BMRTestData model with individualSearch partial so that i can get the characteristic partial view data. So i store that data in IndividualSearch's list public List<Characteristic> Characteristics { get; set; } = new List<Characteristic>();
Please guide me to do same as i am new to .net .
Coding
//TestData(Main View)
#using ABC.Core.Models.DTOs
#model ABC.Core.Models.Api.BMRTestData
#using (Html.BeginForm())
{
<div class="card mb-3">
<h5 class="card-header">Response</h5>
<div class="card-body">
<div class="card-block">
<div class="form-group">
#Html.LabelFor(m => m.CompanyName, "Company Name", new { #class = "form-control-label" })
#Html.TextBoxFor(m => m.CompanyName, null, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.CompanyName)
</div>
<div id="searchindividuals" class="mb-3">
#if (Model?.IndividualSearches != null)
{
for (var i = 0; i < Model?.IndividualSearches.Count; i++)
{
<div class="form-group">
#{ Html.RenderPartial("IndividualSearchPartial", Model.IndividualSearches[i], new ViewDataDictionary()); }
</div>
}
}
</div>
<div class="mb-3">
<button id="add-search-individual" type="button" class="btn btn-success">Add Search Individual</button>
</div>
<button id="add-company-characteristic" type="button" class="btn btn-success">Add Characteristic</button>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
}
#section Scripts
{
function add(element){
var action = ' #Url.Action("NewIndividualSearchCharacteristic", "Blended")';
$.post(action)
.done(function (partialView) {
$(element.previousElementSibling).append(partialView);
});
}
</script>
}
//IndividualSearchPartial
#using (Html.BeginCollectionItem("IndividualSearches"))
{
<div id="individual-details" class="card">
<div class="form-horizontal">
<div class="card-block">
<div class="form-group">
#Html.LabelFor(m => m.SearchPostcode, "Search Post Code", new { #class = "form-control-label" })
#Html.TextBoxFor(m => m.SearchPostcode, null, new { #class = "form-control" })
</div>
</div>
</div>
<div class="card-block">
<div id="Characteristics" class="mb-3">
#if (Model?.Characteristics != null)
{
for (var i = 0; i < Model?.Characteristics.Count; i++)
{
<div class="form-group">
#{ Html.RenderPartial("IndividualSearchCharacterisiticPartial", Model.Characteristics[i], new ViewDataDictionary()); }
#* #Html.EditorFor(m => m.Characteristics);*#
</div>
}
}
</div>
<button id="add-characteristics" onclick="add(this)" type="button" class="btn btn-success">Add Characteristics</button>
</div>
</div>
}
// IndividualSearchCharacterisiticPartial
#model ABC.Core.Models.DTOs.Characteristic
#using (Html.BeginCollectionItem("Characteristics"))
{
<div id="characteristic-details" class="card">
<div class="form-horizontal">
<div class="card-block">
<div class="container">
<div class="row">
<div class="col-*-*">
#Html.LabelFor(m => m.Name, "Name", new { #class = "form-control-label" })
</div>
<div class="col">
#Html.TextBoxFor(m => m.Name, null, new { #class = "form-control" })
</div>
<div class="col-*-*">
#Html.LabelFor(m => m.Value, "Value", new { #class = "form-control-label" })
</div>
<div class="col">
#Html.TextBoxFor(m => m.Value, null, new { #class = "form-control" })
</div>
<div class="col-*-*">
<a id="characteristic-remove" href="#" onclick="removeCharacteristic(this)" class="btn btn-danger pull-right">Remove</a>
</div>
</div>
</div>
</div>
</div>
</div>
}
//IndividualSearch Class
namespace ABC.Core.Models.DTOs.Individual
{
public class IndividualSearch
{
public List<Characteristic> Characteristics { get; set; } = new List<Characteristic>();
}
}
namespace ABC.Core.Models.Api
{
public class BMRTestData : BMRRequest
{
public List<IndividualSearch> IndividualSearches { get; set; } = new List<IndividualSearch>();
}
}
Update
You can add onclick event in Add Search Individual button:
<button id="add-search-individual" type="button" class="btn btn-success" onclick="addSearch(this)">Add Search Individual</button>
Add an action in controller to return IndividualSearchPartial partial view:
[HttpPost]
public ActionResult IndividualSearchCharacteristic()
{
IndividualSearch individualSearch = new IndividualSearch() { };
return PartialView("IndividualSearchPartial", individualSearch);
}
Here is all the js in main view:
#section Scripts
{
<script>
function add(element){
var action = ' #Url.Action("NewIndividualSearchCharacteristic", "Default")';
$.post(action)
.done(function (partialView) {
$(element).parents('#individual-details').find("#Characteristics").append('<div class="form-group">' + partialView + '</div>');
ResetName();
});
}
function addSearch(element){
var action = ' #Url.Action("IndividualSearchCharacteristic", "Default")';
$.post(action)
.done(function (partialView) {
$(element).parents('.mb-3').find('#searchindividuals').append('<div class="form-group search">' + partialView + '</div>');
ResetName();
});
}
function ResetName() {
var index = 0;
$(".search").each(function () {
var nameIndex = 0; var valueIndex = 0;
$(this).find(":input[type='hidden']").each(function () {
$(this).removeAttr("name");
});
$(this).find(":input[type='text']").each(function () {
if ($(this).attr("name").indexOf("Characteristics") > -1 && $(this).attr("name").indexOf("Name") > -1) {
$(this).attr("name", "IndividualSearches[" + index + "].Characteristics[" + nameIndex + "].Name");
nameIndex++;
return;
}
if ($(this).attr("name").indexOf("Characteristics") > -1 && $(this).attr("name").indexOf("Value") > -1) {
$(this).attr("name", "IndividualSearches[" + index + "].Characteristics[" + valueIndex + "].Value");
valueIndex++;
return ;
}
if ($(this).attr("name").indexOf("IndividualSearches") > -1) {
$(this).attr("name", "IndividualSearches[" + index + "].SearchPostcode");
return;
}
});
index++;
})
}
</script>
}
After submit, it will enter into following action to receive BMRTestData data:
[HttpPost]
public IActionResult TestData(BMRTestData bMRTest)
{
return View();
}
Here is the test result:
This is my controller.
public class DokuzasController : Controller
{
schoolEntities se = new schoolEntities();
public ActionResult Index()
{
IEnumerable<DersViewModel> leclist;
HttpResponseMessage responselec = GlobalVariables.LecturesClient.GetAsync("dokuzas").Result;
leclist = responselec.Content.ReadAsAsync<IEnumerable<DersViewModel>>().Result;
return View(leclist);
}
public ActionResult AddOrEdit()
{
List<ders> dersList = se.ders.ToList();
ViewBag.dersList = new SelectList(dersList, "DersID", "Ders1");
return View();
}
public JsonResult GetDersList(int DersID)
{
se.Configuration.ProxyCreationEnabled = false;
List<saat> saatList = se.saat.Where(x => x.DersID == DersID).ToList();
return Json(saatList, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult AddOrEdit(DersViewModel lec)
{
if (lec.LectureId == 0)
{
HttpResponseMessage response = GlobalVariables.LecturesClient.PostAsJsonAsync("dokuzas", lec).Result;
TempData["SuccessMessage"] = "Kaydedildi.";
}
else
{
HttpResponseMessage response = GlobalVariables.LecturesClient.PutAsJsonAsync("dokuzas/" + lec.LectureId, lec).Result;
TempData["SuccessMessage"] = "Güncellendi.";
}
return RedirectToAction("Index");
}
}
And this is AddOrEdit part.
#model Mvc.Models.DersViewModel
<div class="container">
<div class="form-group">
#if (ViewBag.dersList != null)
{
#Html.DropDownListFor(model => model.DersID, ViewBag.dersList as SelectList, "--Lecture--", new { #class = "form-control" })
}
</div>
<div class="form-group">
#Html.DropDownListFor(model => model.SaatID, new SelectList(" "), "--Time--", new { #class = "form-control" })
</div>
</div>
#using (Html.BeginForm())
{
<div class="form-group">
<input type="submit" value="Kaydet" class="btn button" />
<input type="reset" value="Sil" class="btn button" />
</div>
}
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$("#DersID").change(function () {
$.get("/Dokuzas/GetDersList", { DersID: $("#DersID").val() },
function (data) {
$("#SaatID").empty();
$.each(data, function (index, row) {
$("#SaatID").append("<option value='" + row.SaatID + "'>" + row.Saat1 + "</option>");
});
});
});
});
</script>
I create a cascading dropdown list for lecture and time but i cannot save it to the table. When i choose items and select submit button i can submit only null to the table. It did not save what i choose from the dropdownlist. How can i save from my cascading dropdown list to the table?
Your Dropdowns are not inside your Form, so they are not included in the post. Try the below code for your view.
#model Mvc.Models.DersViewModel
#using (Html.BeginForm())
{
<div class="container">
<div class="form-group">
#if (ViewBag.dersList != null)
{
#Html.DropDownListFor(model => model.DersID, ViewBag.dersList as SelectList, "--Lecture--", new { #class = "form-control" })
}
</div>
<div class="form-group">
#Html.DropDownListFor(model => model.SaatID, new SelectList(" "), "--Time--", new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<input type="submit" value="Kaydet" class="btn button" />
<input type="reset" value="Sil" class="btn button" />
</div>
}
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$("#DersID").change(function () {
$.get("/Dokuzas/GetDersList", { DersID: $("#DersID").val() },
function (data) {
$("#SaatID").empty();
$.each(data, function (index, row) {
$("#SaatID").append("<option value='" + row.SaatID + "'>" + row.Saat1 + "</option>");
});
});
});
});
</script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a dropdownlist like this
#Html.DropDownListFor(model => model.si_sec_id, new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), "Select a Section", new { id = "ddlSection" })
it was like that because of this
<script type="text/javascript">
$(document).ready(function () {
$("#ddlGrade").change(function () {
var id = $(this).val();
$.getJSON("../Employee/PopulateDetails", { id:id},
function (marksData) {
var select = $("#ddlSection");
select.empty();
select.append($('<option/>', {
value: 0,
text: "Select a Section"
}));
$.each(marksData, function (index, itemData) {
select.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
}));
});
});
});
});
and the JSON
public JsonResult PopulateDetails(string id)
{
List<Models.Section> a = new List<Models.Section>();
Models.ModelActions Ma = new ModelActions();
a = Ma.getSection(id);
var marksData = a.Select(c => new SelectListItem()
{
Text = c.sec_name,
Value = c.sec_id.ToString(),
});
return Json(marksData, JsonRequestBehavior.AllowGet);
}
now how can i add initial values to the dropdownlist in that format on postback? i need it for my search functionality. comments are much appreciated
EDITED:
VIEW:
<legend>CreateStudent</legend>
Full Name:
#Html.TextBox("searchTerm", null, new { id = "txtSearch" })
<input type="submit" value="search" name="submitbutton" />
<div class="editor-label">
#Html.LabelFor(model => model.si_id)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.si_id, new { #readonly = "readonly" })
#Html.ValidationMessageFor(model => model.si_id)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.si_fname)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.si_fname)
#Html.ValidationMessageFor(model => model.si_fname)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.si_mname)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.si_mname)
#Html.ValidationMessageFor(model => model.si_mname)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.si_lname)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.si_lname)
#Html.ValidationMessageFor(model => model.si_lname)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.si_gl_id)
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.si_gl_id, new SelectList(Model.GradeLevel,"gl_id","gl_name"),"Select Grade Level", new { id = "ddlGrade" })
#Html.ValidationMessageFor(model => model.si_gl_id)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.si_sec_id)
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.si_sec_id, new SelectList(Enumerable.Empty<SelectListItem>(), "Value", "Text"), "Select a Section", new { id = "ddlSection" })
#Html.ValidationMessageFor(model => model.si_sec_id)
</div>
<p>
<input type="submit" value="Create" name="submitbutton" />
</p>
</fieldset>
<p>
<input type="submit" value="Create" name="submitbutton" />
</p>
Controller
[HttpPost]
public ActionResult RegisterStudent(CreateStudent Create, string submitbutton, string searchTerm)
{
acgs_qm.Models.ModelActions Ma = new acgs_qm.Models.ModelActions();
List<CreateStudent> stud = new List<CreateStudent>();
switch (submitbutton)
{
case "search":
ModelState.Clear();
var model = new CreateStudent
{
GradeLevel = Ma.getGrade(),
//Guardian = Ma.getGuardian(),
si_id = Ma.getStringval(searchTerm,"si_id","student_info_tb","si_fullname"),
si_fname = Ma.getStringval(searchTerm, "si_fname", "student_info_tb", "si_fullname"),
si_mname = Ma.getStringval(searchTerm, "si_mname", "student_info_tb", "si_fullname"),
si_lname = Ma.getStringval(searchTerm, "si_lname", "student_info_tb", "si_fullname"),
si_gender = Ma.getStringval(searchTerm, "si_gender", "student_info_tb", "si_fullname"),
};
return View("RegisterStudent",model);
case "Create":
if (ModelState.IsValid)
{
Ma.insertStudent(Create);
}
Create.GradeLevel = Ma.getGrade();
Create.si_id = Ma.getcode("student_info_tb", "si_id", "1");
return View(Create);
default:
return View(Create);
}
}
Change your implementation as follows :
$.getJSON("../Employee/PopulateDetails", { id:id},
function (marksData) {
var $select = $("#ddlSection");
$select.empty();
$select.append('<option value=' + '0' + '>' + 'Select a Section' + '</option>');
$.each(marksData, function (index, itemData) {
$select.append('<option value=' + itemData.Value + '>' + itemData.Text + '</option>');
});
});
Try this
$("#ddlSection").change(function () {
var Id = this.value;
if (Id != 0) {
$.ajax({
type: "POST",
url: "/Employee/PopulateDetails",
data: JSON.stringify({ Id: Id }),
dataType: "text",
contentType: "application/json; charset=utf-8",
processData: false,
success: function (data) {
$("#ddlSection").empty();
$('#ddlSection').append("<option value='0'>Select Selection...</option>");
var yourArray = $.parseJSON(data);
if (yourArray != null) {
for (var i = 0; i < yourArray.length; i++) {
$('#ddlSection').append("<option value='" + yourArray[i].YourFiledName + "'>" + yourArray[i].YourFiledName + "</option>");
}
}
},
error: function (response) {
if (response != 1) {
alert("Error!!!!");
location.reload();
}
}
});
}
else {
alert("Please Select Any Value Name....");
}
});
I'm using MVC 4 and Entity Framework to develop a web app. I'm working with partial views which are loaded with javascript. One of them is a create view which includes validation. And that's my problem : the validation. I have a custom validation logic and, for example, if a user enters some numbers into a field such as "Name", it displays an error.
Here, with the partial views, it redirects me on my partial with the errors displayed but what I wanted to do is to stay on my main view (Index view) and keep my partial view which displays the errors.
EDIT :
Here is my partial view :
#model BuSIMaterial.Models.Person
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Person</legend>
<div class="editor-label">
First name :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.FirstName, new { maxlength = 50 })
#Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="editor-label">
Last name :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.LastName, new { maxlength = 50 })
#Html.ValidationMessageFor(model => model.LastName)
</div>
<div class="editor-label">
National number :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.NumNat, new { maxlength = 11 })
#Html.ValidationMessageFor(model => model.NumNat)
</div>
<div class="editor-label">
Start date :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.StartDate, new {#class = "datepicker", #placeholder="yyyy/mm/dd"})
#Html.ValidationMessageFor(model => model.StartDate)
</div>
<div class="editor-label">
End date :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.EndDate, new { #class = "datepicker", #placeholder = "yyyy/mm/dd" })
#Html.ValidationMessageFor(model => model.EndDate)
</div>
<div class="editor-label">
Distance House - Work (km) :
</div>
<div class="editor-field">
#Html.EditorFor(model => model.HouseToWorkKilometers)
#Html.ValidationMessageFor(model => model.HouseToWorkKilometers)
</div>
<div class="editor-label">
Category :
</div>
<div class="editor-field">
#Html.DropDownList("Id_ProductPackageCategory", "Choose one ...")
#Html.ValidationMessageFor(model => model.Id_ProductPackageCategory) Add a new category?
</div>
<div class="editor-label">
Upgrade? :
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Upgrade)
#Html.ValidationMessageFor(model => model.Upgrade)
</div>
<br />
<div class="form-actions">
<button type="submit" class="btn btn-primary">Create</button>
</div>
</fieldset>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/themes/base/css")
}
In my view Index, I have this :
<div class="form-actions"><button type="button" id="create" class="btn btn-primary">Create</button> </div>
<div id ="create_person"></div>
And the way I load my Partial View :
$("#create").click(function () {
var form = $("#create_person").closest("form");
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);
$.ajax({
url: "/Person/CreateOrUpdate",
type: "POST",
data: $("#create_person").serialize(),
cache: false
});
// var url = '/Person/CreatePerson';
// $("#create_person").load(url);
});
The actions :
[HttpGet]
public ActionResult CreateOrUpdate()
{
ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name");
return View();
}
[HttpPost]
public JsonResult CreateOrUpdate(Person person)
{
ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name", person.Id_ProductPackageCategory);
try
{
if (!ModelState.IsValid)
{
string messages = string.Join("; ", ModelState.Values
.SelectMany(x => x.Errors)
.Select(x => x.ErrorMessage));
throw new Exception("Please correct the following errors: " + Environment.NewLine + messages);
}
db.Persons.AddObject(person);
db.SaveChanges();
return Json(new { Result = "OK" });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}
If you post the page it will not come back to the dynamically loaded partial view. Try to make a ajax call to /Person/CreatePerson. Your CreatePerson will look similar to
[HttpPost]
public JsonResult CreatePerson(Person person)
{
ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name", person.Id_ProductPackageCategory);
try
{
if (!ModelState.IsValid)
{
string messages = string.Join("; ", ModelState.Values
.SelectMany(x => x.Errors)
.Select(x => x.ErrorMessage));
throw new Exception("Please correct the following errors: " + Environment.NewLine + messages);
}
db.Persons.AddObject(person);
db.SaveChanges();
return Json(new { Result = "OK" });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
} `
The ajax call to /Person/CreatePerson will look similar to
`
$.ajax({
url: '/Person/CreatePerson',
type: "POST",
data: $("#form").serialize(),
success: function (responce) {
alert(responce.Message);
},
error: function (xhr, textStatus) {
alert(xhr.status + " " + xhr.statusText);
}
});
Besides unobtrusive validation will not work easily with dynamic content. check the link unobtrusive validation on dynamically added partial view (not working)
I've developed a decent workaround for this. The partial page won't show the server errors on postback. First of all, we get the errors, send them back to the page, then create them in javascript & revalidate the page. Hopefully, hey presto!
In your controller:
if (ModelState.IsValid)
{
//... whatever code you need in here
}
var list = ModelStateHelper.AllErrors(ModelState);
TempData["shepherdErrors"] = list;
I put it in TempData so it can be retrieve easily from the partial. Yes, I called it shepherdErrors, it's my idea so I can call the concept whatever silly name I want! Shepherd the error codes to where they should be or something being the general idea.
In a helper class:
public class ModelStateHelper
{
public static IEnumerable<KeyValuePair<string, string>>
AllErrors(ModelStateDictionary modelState)
{
var result = new List<KeyValuePair<string, string>>();
var erroneousFields = modelState.Where(ms => ms.Value.Errors.Any())
.Select(x => new { x.Key, x.Value.Errors });
foreach (var erroneousField in erroneousFields)
{
var fieldKey = erroneousField.Key;
var fieldErrors = erroneousField.Errors
.Select(error => new KeyValuePair<string, string>(fieldKey, error.ErrorMessage)); //Error(fieldKey, error.ErrorMessage));
result.AddRange(fieldErrors);
}
return result;
}
}
Then on the html page somewhere after jquery being loaded:
function displayShepherdErrors() {
var shepherdErrors = JSON.parse('#(Newtonsoft.Json.JsonConvert.SerializeObject(TempData["shepherdErrors"]))'.replace(/"/g, '"'));
var frm;
var isShepherdErrors = (shepherdErrors && shepherdErrors.length > 0);
if (isShepherdErrors) {
errObj = {};
for (var i = 0; i < shepherdErrors.length; i++) {
var errorKey = shepherdErrors[i].Key; //also the id of the field
var errorMsg = shepherdErrors[i].Value;
var reg = new RegExp('^' + errorKey + '$', 'gi');
//find the selector - we use filter so we can find it case insensitive
var control = $('input').filter(function () {
if ($(this).attr('id'))
return $(this).attr('id').match(reg);
});
if (control && control.length) {
control = control[0];
var controlId = $(control).attr('name');
errObj[controlId] = errorMsg;
//get the containing form of the first input element
if (!frm)
frm = control.form;
}
}
var validator = $(frm).validate();
validator.showErrors(errObj);
}
return isShepherdErrors;
}
var isShepherdErrors = displayShepherdErrors();
This should work out of the box with general MVC development provided text boxes that are generated are based on the variable names - this is default behaviour of MVC.
I am writing some javascript where the selected option in a dropdown menu get assigned to a hiddenfor value. This hiddenfor is using a model property (SelectedModule).
When I click my submit button, the model.SelectedModule has null value even though I assigned a value to it with my javascript.
View
#model UserManager.Models.vw_UserManager_Model
#{
ViewBag.Title = "EditUser";
}
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div id="edit-user">
<fieldset>
<legend>Edit user details</legend>
<div class="editor-field">
#Html.DropDownListFor(Model => Model.salutation, new List<SelectListItem>
{
new SelectListItem{ Text="Mr", Value = "Mr" },
new SelectListItem{ Text="Mrs", Value = "Mrs" },
new SelectListItem{ Text="Miss", Value = "Miss" },
new SelectListItem{ Text="Ms", Value = "Ms" },
new SelectListItem{ Text="Dr", Value = "Dr" }
})
#Html.ValidationMessageFor(model => Model.salutation)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.firstname)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.firstname)
#Html.ValidationMessageFor(model => model.firstname)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.lastname)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.lastname)
#Html.ValidationMessageFor(model => model.lastname)
</div>
#{Html.Partial("~/Views/Partial/_AutocompleteGroupName.cshtml", this.ViewData);}
<div class="editor-label">
#Html.LabelFor(model => model.isactive)
</div>
<div class="editor-field">
#Html.EditorFor(model => Model.isactive)
#Html.ValidationMessageFor(model => Model.isactive)
</div>
<div class="editor-label">
#Html.Label("Is approved")
</div>
<div class="editor-field">
#Html.EditorFor(model => Model.IsApproved)
#Html.ValidationMessageFor(model => Model.IsApproved)
</div>
<div class="editor-label">
#Html.Label("Maximum concurrent users")
</div>
<div class="editor-field">
#Html.EditorFor(model => Model.MaxConcurrentUsers)
#Html.ValidationMessageFor(model => Model.MaxConcurrentUsers)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.email)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.email)
#Html.ValidationMessageFor(model => model.email)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.rowtype)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.rowtype, new { #readonly = "readonly", #id = "txtNonEditableRowType" })
- Non editable
</div>
<div class="editor-label">
#Html.Label("Current Module")
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.module_name, new { #readonly = "readonly", #id = "txtNonEditableModule" })
- Non editable
#Html.ValidationMessageFor(model => model.module_name)
</div>
<br />
#if (Model.rowtype == "ALF")
{
<div id="alfModules">
#Html.Label("New module")
<br />
#{Html.RenderAction("_CreateUserModulesAlf", "UserManager");}
</div>
}
#if (Model.rowtype == "BRAD")
{
<div id="bradModules">
#Html.Label("New module")
<br />
#{Html.RenderAction("_CreateUserModulesBrad", "UserManager");}
</div>
}
<div class="editor-label">
#Html.LabelFor(model => model.group_name)
</div>
#* <div class="editor-field">
#Html.EditorFor(model => model.group_name)
#Html.ValidationMessageFor(model => model.group_name)
</div>*#
<div class="editor-label">
#Html.Label("Current Group")
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.group_name, new { #readonly = "readonly", #id = "txtNonEditableGroup" })
- Non editable
#Html.ValidationMessageFor(model => model.group_name)
</div>
#Html.HiddenFor(model => Model.selected_module, new { id = "hdnSelectedModule" })
#* #Html.HiddenFor(model => Model.selected_moduleAlf, new { id = "hdnSelectedModuleAlf" })
#Html.HiddenFor(model => Model.selected_moduleBrad, new { id = "hdnSelectedModuleBrad" })*#
<br />
<fieldset style="width: 400px; padding-left: 15px;">
<legend>Group Checker</legend>
<div id="createuser-groupnamesearch">
#{Html.RenderAction("_txtGroupSearchForm", "UserManager");}
</div>
</fieldset>
<p>
<input type="submit" value="Edit" onclick="newModule()" />
</p>
<br />
#Html.ActionLink("Back to User Manager Dashboard", "Index")
</fieldset>
</div>
}
<script type="text/javascript">
$("#group_name").autocomplete({
source: function (request, response) {
$.ajax({
url: '#Url.Action("LookUpGroupName", "UserManager")',
dataType: "json",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
value: request.term
},
success: function (data) {
response($.map(data, function (item) {
// alert(item.group);
return {
label: item.group,
value: item.group
} // end of return
})); // end of response
}, // end of success
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
} // end of error
}); // end of ajax
},
minLength: 2,
select: function (event, ui) { // Assign to hidden values to trigger onchange ajax call.
$.ajax({
url: '#Url.Action("GroupnameCheck", "UserManager")',
dataType: "json",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
value: ui.item.label
},
success: function (data) {
$.each(data, function (index, value) {
if (index == "AlfGroup") {
$("#txtGroupnameExistsAlf").val(value);
if ($("#txtGroupnameExistsAlf").val() == "Alf Group doesn't exist.") {
$("#txtGroupnameExistsAlf").css("background-color", "red");
}
else {
$('#txtGroupnameExistsAlf').css("background-color", "#33ff00");
}
}
if (index == "BradGroup") {
$("#txtGroupnameExistsBrad").val(value);
if ($("#txtGroupnameExistsBrad").val() == "Brad Group doesn't exist.") {
$("#txtGroupnameExistsBrad").css("background-color", "red");
}
else {
$('#txtGroupnameExistsBrad').css("background-color", "#33ff00");
}
}
});
}, // end of success
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus);
} // end of error
}); // end of ajax
$('#hdnGroupAlf').val(ui.item.label);
$('#hdnGroupBrad').val(ui.item.label);
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
function chkSelection() {
var rowType = $("#txtNonEditableRowType").val();
if (rowType == "ALF") {
var selectedVal = $("#ddlSelectedAlf option:selected").val();
$('#hdnSelectedModule').val(selectedVal);
}
else {
var selectedVal = $("#ddlSelectedBrad option:selected").val();
$('#hdnSelectedModule').text(selectedVal);
alert(selectedVal);
}
}
$(document).ready(function () {
// Non editable fields grey
$("#txtNonEditableGroup").css("background-color", "gray");
$("#txtNonEditableModule").css("background-color", "gray");
$("#txtNonEditableRowType").css("background-color", "gray");
// Show/Hide group check part based on IF ALF or BRAD
var rowType = $("#txtNonEditableRowType").val();
if (rowType == "ALF") {
$("#groupname-checker-alf").show();
$("#groupname-checker-brad").hide();
var selectedVal = $("txtNonEditableRowType").val();
$('#hdnModuleAlf').val(selectedVal);
}
else {
$("#groupname-checker-alf").hide();
$("#groupname-checker-brad").show();
var selectedVal = $("txtNonEditableRowType").val();
$('#hdnModuleBrad').val(selectedVal);
}
});
function newModule() { // Assign new selected module from dropdown to hidden form
// so it can be used in model as selected_module
if ($("#txtNonEditableRowType").val() == "ALF") {
var val = $("#module_name :selected").val();
$("#hdnSelectedModule").val(val);
}
else {
var val = $("#module_name :selected").val();
$("#hdnSelectedModule").val(val);
}
}
</script>
Controller
[HttpPost]
public ActionResult EditUser(vw_UserManager_Model model)
{
List<UserManager.Models.vw_UserManager_Model> modellist = new List<vw_UserManager_Model>();
int outcome = 0;
if (ModelState.IsValid)
{
outcome = UserManager.DAL.EditUser(model);
modellist.Add(model);
}
if (outcome == 1)
{
if (modellist.FirstOrDefault().rowtype == "Alf")
{
}
else
{
}
return RedirectToAction("showSuccessUser", new
{
CrudType = "Edit",
UserName = modellist.FirstOrDefault().UserName,
Password = modellist.FirstOrDefault().password,
FirstName = modellist.FirstOrDefault().firstname,
LastName = modellist.FirstOrDefault().lastname,
Email = modellist.FirstOrDefault().email,
GroupName = modellist.FirstOrDefault().group_name,
IsActive = modellist.FirstOrDefault().isactive,
selected_module = modellist.FirstOrDefault().module_name
});
}
else
{
ViewBag.Message = "Failure";
return RedirectToAction("showError", model);
}
}
Summary
When an item is selected in the drop down menu, the value is assigned to HiddenFor field. This works from using firebug I can see the value.
The problem is when I submit the form, the model.SelectedModule property in my C# code has a null value.
Does anyone know why?
I don't know if this is the problem but in one of your cases you are doing:
$('#hdnSelectedModule').text(selectedVal);
which should be:
$('#hdnSelectedModule').val(selectedVal);
Also since you are already using FireBug, inspect the AJAX request in the Net tab. You will see all the key/value pairs that are sent to the server and will be able to more easily identify the problem. For example is there a SelectedModule=some_value in the request? If so, assuming that your model has a property called SelectedModule and is of simple type (such as string) you will be able to get its value.