Call MVC4 partial view with Jquery Ajax - ajax

I need you help with my mvc4 project. I have 2 drop down menus. When i select firs one, the second is automatically populated with help of Jquery and Ajax. When i select the other one, which is now populated with some data, i need to invoke a method which calls a PL/SQL procedure, and i need to pass a value to that method, which is selected in a second drop down menu.
That method returs some data which I need to pass to my partial view and in that partial view i need to generate a tree view from passed data.
So far i was able to generate TreeView (using jsTree) in my partial view when i hardcoded a value and invoked my method from controler, but i need to do that when i select a value from my second drop down list.
This is my code:
My Controller
public class IndexController : Controller
{
public ActionResult Index()
{
EpfeSelectScreen model = new EpfeSelectScreen();
#region Country
var b = (from a in dbEntitiesErste.CONFIG_COUNTRIES
orderby a.COUNTRY_ID
select new Countries
{
Text = a.COUNTRY_NAME,
Value = a.COUNTRY_ID
});
model.Country = b.OrderBy(x => x.Text).ToList();
#endregion
#region Oracle Stored Procedures
List<TreeNode> list = new List<TreeNode>();
list = ClassData.GetAllClasses(1); //hardcoded value 1 Here goes the value from second drop down list
var TopHierarchy = list.Where(x => x.ParentId == -1).FirstOrDefault();
SetChildren(TopHierarchy, list);
#endregion
var pmViewModel = new MainViewModel
{
FullModelObject = model,
PartialModelObject = TopHierarchy
};
return View(pmViewModel);
}
#region generate Tree
private void SetChildren(TreeNode model, List<TreeNode> list)
{
var childs = list.Where(x => x.ParentId == model.ChildId).ToList();
if (childs.Count > 0)
{
foreach (var child in childs)
{
SetChildren(child, list);
model.Children.Add(child);
}
}
}
#endregion
#region jquery methods
[OutputCache(Duration = 0)]
[HttpGet]
public JsonResult Application(string[] Country)
{
var apl = new List<Applications>();
if (Country[0] == "")
{
//*aplications
var result = (from a in dbEntitiesErste.CONFIG_APPLICATIONS
select new Applications
{
Text = a.APPLICATION_NAME,
Value = a.APPLICATION_ID
});//*.OrderBy(x => x.Text).ToList()
apl.Add(new Applications { Value = 0, Text = "--Please choose application--" });
apl.AddRange(result.OrderBy(x => x.Text).ToList());
}
else
{
var result = (from a in dbEntitiesErste.CONFIG_APPLICATIONS
where Country.Contains(a.COUNTRY_ID)
select new Applications
{
Text = a.APPLICATION_NAME,
Value = a.APPLICATION_ID
}); //*.OrderBy(x => x.Text).ToList();
apl.Add(new Applications { Value = 0, Text = "--Please choose application--" });
apl.AddRange(result.OrderBy(x => x.Text).ToList());
}
var retVal = new { Application = aplikacije };
return Json(retVal, JsonRequestBehavior.AllowGet);
}
//[OutputCache(Duration = 0)]
//[HttpGet]
//public JsonResult Tree(int idApp)
//{
// var ret = (from a in dbEntitiesErste.CONFIG_APPLICATIONS
// select new Applications
// {
// Text = a.APPLICATION_NAME,
// Value = a.APPLICATION_ID
// }).OrderBy(x => x.Text).ToList();
// return Json(ret, JsonRequestBehavior.AllowGet);
//}
#endregion
}
this is my main View (Index.cshtml)
#model EPFE.Models.ViewModels.MainViewModel
<!DOCTYPE html>
#{
ViewBag.Title = "EB";
}
<head>
<title>EBB</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="#Url.Content("~/Scripts/jquery-ui-1.10.3.js")" type="text/javascript"></script>
<script src="~/Scripts/Selections.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="#Url.Content("~/Scripts/jstree.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/Selection.css")" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="#Url.Content("~/Content/themes/style.css")" rel="stylesheet" />
<script type="text/javascript">
var pathAplications = '#Url.Action("Application", "Index")';
var pathTreeView = '#Url.Action("Tree", "Index")';
</script>
</head>
<body>
<table>
<tr>
<td>
#Html.DropDownList("Country", new SelectList(Model.FullModelObject.Country, "Value", "Text"), "--Please select Country--")
</td>
</tr>
<tr>
<td>
#Html.DropDownList("Application", new SelectList(Model.FullModelObject.Application, "Value", "Text"), "--Please choose application--")
</td>
</tr>
</table>
<fieldset class="Tree">
<div id="divtree">
<ul id="tree">
<li>
#Model.PartialModelObject.ObjectIdentifier
#Html.Partial("_TreeView", Model.PartialModelObject)
</li>
</ul>
</div>
</fieldset>
</body>
This is my partial view (_TreeView.cshtml)
#model EPFE.TreeViewModel.TreeNode
#foreach (var item in Model.Children)
{
<ul>
#if (item != null)
{
<li>
#item.ObjectIdentifier
#if (item.Children.Count > 0)
{
#Html.Partial("_TreeView", item)
}
</li>
}
</ul>
}
and these are my models
public class EpfeSelectScreen
{
public string Search { get; set; }
public string selectedApplication { get; set; }
public string selectedCountry { get; set; }
public string selectedMetaData { get; set; }
public string selectedTreeView { get; set; }
public List<Countries> Country { get; set; }
public List<Applications> Application { get; set; }
public List<SelectListItem> MetaData { get; set; }
public List<SelectListItem> References { get; set; }
public List<SelectListItem> ReferencedBy { get; set; }
public List<SelectListItem> TreeView { get; set; }
public EpfeSelectScreen()
{
Country = new List<Countries>();
Application = new List<Applications>();
References = new List<SelectListItem>();
ReferencedBy = new List<SelectListItem>();
TreeView = new List<SelectListItem>();
MetaData = new List<SelectListItem>();
}
}
Second one
public class MainViewModel
{
public EpfeSelectScreen FullModelObject { get; set; }
public TreeNode PartialModelObject { get; set; }
public MainViewModel()
{
FullModelObject = new EpfeSelectScreen();
PartialModelObject = new TreeNode();
}
}
and the last one
public class TreeNode
{
public int ParentId { get; set; }
public int ChildId { get; set; }
public int ObjectRelId { get; set; }
public string ObjectIdentifier { get; set; }
public string ObjectTypeId { get; set; }
public IList<TreeNode> Children { get; set; }
public TreeNode()
{
Children = new List<TreeNode>();
}
}
and these are my scripst
$(document).ready(function () {
$("#Country").on('change', CountryChange);
//$("#selectedApplication").on('change', ApplicationChange);
//*
$("#Application").on('change', ApplicationChange);
});
function CountryChange() {
var CountryIds = [];
$("#Country option:selected").each(function (i, selected) {
CountryIds[i] = $(selected).val();
});
$.ajax({
url: pathAplications,
type: 'GET',
data: { Country: CountryIds },
success: function (data) {
var apl = $("#Application");
apl.empty();
for (var j = 0; j < data.Application.length; j++) {
var item = data.Application[j];
var option = "<option value='" + item.Value + "'>" + item.Text + "</option>";
apl.append(option);
}
},
error: function (x, y) {
$("#displayError").html(x.val());
},
traditional: true
});
}
function ApplicationChange() {
var applicationId = [];
$("#Application option:selected").each(function (i, selected) {
applicationId[i] = $(selected).val();
});
$.ajax({
url: pathTreeView,
type: 'GET',
data: { Application: applicationId },
success: function (data) {
var tree = $("#selectedApplication");
trees.empty();
for (var j = 0; j < data.Application.length; j++) {
var item = data.Application[j];
var option = "<option value='" + item.Value + "'>" + item.Text + "</option>";
trees.append(option);
}
},
error: function (x, y) {
$("#displayError").html(x.val());
},
traditional: true
});
}
The function ApplicationChange catches the right value but i don't know how to use it to invoke my method for pl/sql procedure and return that data to partial view.

give your url like this
'#Url.Action("actionname","controllerNmae")',
also make sure if you are making a get or post request then the target action should have that attribute as well.
also you data type will be json for this.
or even better use like this
$.getJSON('#Url.Action("Controller Name here")',
function ()
{
});

Related

Get radiobutton selected according to value in database using mvc3

i have a radiobutton list in my create view.It is generated along with checkbox when selecting a dropdown.
#model IEnumerable<Admin.Models.viewmodel>
#foreach (var item in Model)
{
<label>
#Html.CheckBox("User", item.Selected, new { #id = "User" + item.Value, #value = item.Value })
#item.Text
</label>
<label>
#Html.RadioButton("rdnUser" + item.Value.TrimStart(), 1, item.IsSelected,new { #id = "rdnUser"})Primary
</label>
<label>
#Html.RadioButton("rdnUser" + item.Value.TrimStart(), 2,item.IsSelected, new { #id = "rdnUser"})Secondary
</label>
}
Iam saving the value of radiobutton to a field UserType in table UserMapping.
When I click on Edit link,I want to get the radiobutton selected according to database value..
Created a viewmodel to take values in checkbox and radiobutton.viewpartial viewmodel is:-
public class viewpartial : System.Web.Mvc.SelectListItem
{
public int Values { get; set; }
public bool IsSelected { get; set; }
}
The query is:-
var query = (from u in UserMapping
where u.UserID == id && u.Active == 1
join f in Financial on u.FinancialID equals f.FinancialID
into c
from d in c.DefaultIfEmpty()
select new viewpartialIFC
{
Text = d.FiName,
Value = SqlFunctions.StringConvert((double)d.FinancialID),
Selected = d.FinancialID == u.FinancialID ? true : false,
Values = u.UserType,
//IsSelected=???
}).Distinct().ToList();
what changes should i make in the query to get radiobutton selected..
This is a way that you can create a list of users and have the option to selected them (checkbox) and selected a particular role (radiobuttons):
ViewModel:
public class AdminViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public bool isSelected { get; set; }
public int RadioValue { get; set; }
}
Controller:
public class HomeController : Controller
{
public ActionResult Index()
{
var data = GenerateViews();
return View(data);
}
[HttpPost]
public ActionResult Index(IList<AdminViewModel> data)
{
var selectedViews = data.Where(d => d.isSelected == true);
foreach (var selected in selectedViews)
{
//selected.Id;
//selected.RadioValue;
}
System.Diagnostics.Debugger.Break();
return View(data);
}
private IList<AdminViewModel> GenerateViews()
{
var output = new List<AdminViewModel>();
var rand = new Random();
for (var count = 1; count <= 10; ++count)
{
var newView = new AdminViewModel();
newView.Id = count;
newView.Name = "Name " + count.ToString();
newView.isSelected = false;
newView.RadioValue = rand.Next(1, 3);
output.Add(newView);
}
return output;
}
}
View:
#model IList<WebMVC3.Controllers.AdminViewModel>
<h2>Index</h2>
#using (Html.BeginForm())
{
//foreach (var item in Model)
for(var index = 0; index < Model.Count; ++index)
{
<div>
#Html.HiddenFor(m => Model[index].Id)
<label>
#Html.CheckBoxFor(m => Model[index].isSelected, Model[index].isSelected)
#Model[index].Name
</label>
<label>
#Html.RadioButtonFor(m => Model[index].RadioValue, 1)
Primary
</label>
<label>
#Html.RadioButtonFor(m => Model[index].RadioValue, 2)
Secondary
</label>
</div>
}
<input type="submit" value="Save" />
}

MVC 3 Model binding and No parameterless constructor defined for this object

I created a view that was working wonderfully until I added some JQuery to support cascading drop downs. I believe in doing that, I broke the binding between the view and the model. I'm getting the error "No parameterless constructor defined for this object." when the form is submitted. The obvious solution would be to add a parameterless constructor, but I'm assuming that the postmodel will be null? Code Snippets below.
Thanks in Advance for your help.
View:
<script type="text/javascript">
$(document).ready(function () {
$("#ddlCategories").change(function () {
var iCategoryId = $(this).val();
$.getJSON(
"#Url.Content("~/Remote/SubCategoriesByCateogry")",
{ id: iCategoryId },
function (data) {
var select = ResetAndReturnSubCategoryDDL();
$.each(data, function (index, itemData) {
select.append($('<option/>', { value: itemData.Value, text: itemData.Text }));
});
});
});
function ResetAndReturnSubCategoryDDL() {
var select = $('#ddlSubCategory');
select.empty();
select.append($('<option/>', { value: '', text: "--Select SubCategory--" }));
return select;
}
});
...
<div class="editor-field">
#Html.DropDownList("iCategoryID", Model.Categories,"--Select Category--", new Dictionary<string,object>{ {"class","dropdowns"},{"id","ddlCategories"}})
#Html.ValidationMessage("iCategoryID")
</div>
<div class="editor-label">
#Html.LabelFor(model => model.SubCategories, "SubCategory")
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.SubCategories, new SelectList(Enumerable.Empty<SelectListItem>(), "iSubCategoryID", "SubCategory",Model.SubCategories), "--Select SubCategory--", new { id = "ddlSubCategory" })
#Html.ValidationMessage("iSubCategoryID")
</div>
Controller:
[HttpPost]
public ActionResult Create(VendorCreateModel postModel)
{
VendorCreateEditPostValidator createValidator = new VendorCreateEditPostValidator(
postModel.iCategoryID,
postModel.iSubCategoryID,
postModel.AppliedPrograms,
m_unitOfWork.ProgramRepository,
new ModelStateValidationWrapper(ModelState));
if (ModelState.IsValid)
{
int categoryId = int.Parse(postModel.iCategoryID);
int subcategoryId = int.Parse(postModel.iSubCategoryID);
var programIds = postModel.AppliedPrograms.Select(ap => int.Parse(ap));
var programs = m_unitOfWork.ProgramRepository.GetPrograms(programIds);
Vendor vendor = postModel.Vendor;
vendor.Category = m_unitOfWork.CategoryRepository.GetCategory(categoryId);
vendor.SubCategory = m_unitOfWork.SubCategoryRepository.GetSubCategory(subcategoryId);
foreach (Program p in programs)
vendor.Programs.Add(p);
m_unitOfWork.VendorRepository.Add(vendor);
m_unitOfWork.SaveChanges();
return RedirectToAction("Index");
}
VendorCreateModel model = new VendorCreateModel(
postModel.Vendor,
postModel.iCategoryID,
postModel.iSubCategoryID,
postModel.AppliedPrograms,
User.Identity.Name,
m_unitOfWork.CategoryRepository,
m_unitOfWork.SubCategoryRepository,
m_unitOfWork.PermissionRepository);
return View(model);
}
RemoteController:
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult SubCategoriesByCateogry(int id)
{
System.Diagnostics.Debug.WriteLine(id);
var SubCategories = db.SubCategories
.Where(v => v.iCategoryID == id)
.OrderBy(v => v.sDesc)
.ToList();
var modelData = SubCategories.Select(v => new SelectListItem()
{
Text = v.sDesc,
Value = v.iSubCategoryID.ToString()
});
return Json(modelData, JsonRequestBehavior.AllowGet);
}
VendorCreateModel:
public class VendorCreateModel
{
public VendorCreateModel()
{
}
public VendorCreateModel(
Vendor vendor,
string categoryId,
string subcategoryId,
IEnumerable<string> appliedPrograms,
string username,
ICategoryRepository categoryRepository,
ISubCategoryRepository subcategoryRepository,
IPermissionRepository permissionRepository)
{
UserHasProgramsValidator programValidator = new UserHasProgramsValidator(username, permissionRepository);
var availablePrograms = programValidator.AvailablePrograms;
HashSet<Category> applicableCategories = new HashSet<Category>();
foreach (var p in availablePrograms)
foreach (var c in categoryRepository.GetCategoriesByProgram(p.iProgramID))
applicableCategories.Add(c);
this.Vendor = vendor;
this.AppliedPrograms = appliedPrograms;
this.Categories = new SelectList(applicableCategories.OrderBy(x => x.sDesc).ToList(), "iCategoryID", "sDesc");
this.SubCategories = new SelectList(subcategoryRepository.GetAllSubCategories().OrderBy(x => x.sDesc).ToList(), "iSubCategoryID", "sDesc");
if (!string.IsNullOrEmpty(categoryId))
{
int temp;
if (!int.TryParse(categoryId, out temp))
throw new ApplicationException("Invalid Category Identifier.");
}
this.iCategoryID = categoryId;
this.iSubCategoryID = subcategoryId;
this.ProgramItems = availablePrograms
.Select(p => new SelectListItem()
{
Text = p.sDesc,
Value = p.iProgramID.ToString(),
Selected = (AppliedPrograms != null ? AppliedPrograms.Contains(p.iProgramID.ToString()) : false)
});
}
public Vendor Vendor { get; set; }
public SelectList Categories { get; set; }
public SelectList SubCategories { get; set; }
public string iCategoryID { get; set; }
public string iSubCategoryID { get; set; }
public IEnumerable<SelectListItem> ProgramItems { get; set; }
[AtLeastOneElementExists(ErrorMessage = "Please select at least one program.")]
public IEnumerable<string> AppliedPrograms { get; set; }
}
I correct the issue and wanted to share in case someone else was banging their head against their desk like Ihave been. Basically I changed the dropdownlistfor to reflect:
#Html.DropDownListFor(model => model.iSubCategoryID, new SelectList(Enumerable.Empty<SelectListItem>(), "iSubCategoryID", "SubCategory",Model.SubCategories), "--Select SubCategory--", new Dictionary<string,object>{ {"class","dropdowns"},{"id","ddlSubCategory"},{"name","iSubCategoryID"}})
Assuming here the problem is in your VendorCreateModel, you either need to add a parameterless constructor or remove it, and create an instance in your action method and populate it by TryUpdateModel. Or parse the form using FormsCollection (not a fan).
You don't have the code for your viewmodel posted here but the basic assumption is that it will map.

Load data in Telerik grid by dropdownlist selected value

I am a beginner in Telerik Grid in ASP.NET MVC3. I try to bind Grid with dropdownlist selected value. Please see my code below.
My web model class
public class CustomerEventRolesModels
{
public int Event { get; set; }
public IEnumerable<System.Web.Mvc.SelectListItem> Events { get; set; }
public Telerik.Web.Mvc.GridModel<CustomerEventRolesModel> GridData { get; set; }
}
public class CustomerEventRolesModel : BaseNopEntityModel
{
public string Customer { get; set; }
public bool Sponsor { get; set; }
public bool Speaker { get; set; }
}
My .cshtml
<table id="grdCustomerEventRoleData" class="adminContent" style="display: none">
<tr>
<td>
<p>
</p>
</td>
</tr>
<tr>
<td>
#(Html.Telerik().Grid<CustomerEventRolesModel>(Model.GridData.Data)
.Name("grdCustomerEventRoles")
.Columns(columns =>
{
columns.Bound(x => x.Customer);
columns.Bound(x => x.Speaker).Template(x => Html.CheckBox("spk", x.Speaker));
columns.Bound(x => x.Sponsor).Template(x => Html.CheckBox("spn", x.Sponsor));
}
) .Pageable(settings => settings.Total(Model.GridData.Total)
.PageSize(gridPageSize)
.Position(GridPagerPosition.Both))
.ClientEvents(events => events.OnDataBinding("onDataBinding"))
.DataBinding(dataBinding => dataBinding.Ajax().Select("FilterByDropdown", "Customer"))
.EnableCustomBinding(true))
) )
</td>
</tr>
<script type="text/javascript">
var initialLoad = true;
$("#select-event").change(function () {
if ($("#select-event option:selected").val() > 0) {
$("#grdCustomerEventRoleData").show();
$("#grdCustomerEventRoles").data("tGrid").rebind();
}
else {
$("#grdCustomerEventRoleData").show();
}
});
function onDataBinding(e) {
if (initialLoad == true) {
e.preventDefault();
initialLoad = false;
}
else {
var classificationId = $("#select-event option:selected").val();
if (classificationId != "")
e.data = $.extend(e.data, {
selEvent: classificationId
});
else {
e.preventDefault();
$("#grdCustomerEventRoleData").hide();
}
}
}
Actions in controller
public ActionResult FirstBind()
{
if (!_permissionService.Authorize(StandardPermissionProvider.ManageCustomers))
return AccessDeniedView();
var model = new CustomerEventRolesModels();
model.Event = 0;
List<Nop.Core.Domain.Catalog.Product> products = _productRepository.Table.Where(p => p.EventDate != null && p.EventDate >= DateTime.Now).ToList();
model.Events = products.Select(p => new System.Web.Mvc.SelectListItem
{
Text = p.Name,
Value = p.Id.ToString()
});
var grdmodel = new GridModel<CustomerEventRolesModel>
{
Data = null,
Total = 0
};
model.GridData = grdmodel;
return View(model);
}
[HttpPost, GridAction(EnableCustomBinding = true)]
public ActionResult FilterByDropdown(GridCommand command, int selEvent)
{
if (!_permissionService.Authorize(StandardPermissionProvider.ManageCustomers))
return AccessDeniedView();
if (selEvent == 0)
return View();
var model = new CustomerEventRolesModels();
model.Event = selEvent;
var roles = (from lst in _customerEventRoleRepository.Table
join cust in _customerRepository.Table on lst.CustomerId equals cust.Id
join product in _productRepository.Table on lst.EventId equals product.Id
join role in _customerRoleRepository.Table on lst.RoleId equals role.Id
orderby lst.Id descending
select new CustomerEventRolesModel
{
Id = lst.Id,
Customer = cust.Email,
Sponsor = (role.Name == "Sponsor") ? true : false,
Speaker = (role.Name == "Speaker") ? true : false
}).ToList();
var grdmodel = new GridModel<CustomerEventRolesModel>
{
Data = roles,
Total = roles.Count
};
model.GridData = grdmodel;
return new JsonResult
{
Data = model
};
}
FilterByDropdown action is works correctly but Grid is not binded.
I am clueless.
Please help.
If you want to add a dropdown to a Telerik MVC Grid when editing a row, you will need to follow next few steps (aside from making the grid ajax bound and the rows editable).
Let’s say we want the column representing a name (“Name” from the model) to be a dropdown, from which a name can be selected rather than typed. Add a folder named “EditorTemplates” to the folder containing the view that the grid is on. It will contain a separate partial view for each dropdown we want to show in the row that is being edited. Make a partial view (mentioned above), name it e.g. “ClientName.cshtml”, containing a Telerik DropDownList named “Name” and bound to required list of names.
#(Html.Telerik().DropDownList()
.Name("Name")
.BindTo(new SelectList((IEnumerable)ViewData["CustomerNames"], "Text", "Value"))
)
Add the following attribute to the “Name” property of the data type that the grid uses e.g. Grid uses “Customer” class, containing “string Name” field:
public class Customer{ [UIHint("ClientName"), Required] public string Name { get; set; } }
The UIHint property specifies which field template to use when a specific column is rendered.
Add the following java script to the page containing the grid function:
function onEditCustomerList(e) { if (e.dataItem != null) { $(e.form).find('#Name').data('tDropDownList').select(function (dataItem) { return dataItem.Text == e.dataItem['Name']; });
} }
This should do the trick.
You're returning the wrong model.
Try this in FilterByDropdown:
var grdmodel = new GridModel<CustomerEventRolesModel>
{
Data = roles,
Total = roles.Count
};
return new JsonResult
{
Data = grdmodel
};

How to get selected value and and id from dropdownlist in mvc3?

When I make my httppost call, i need to get the selected value and the id of a random number of dropdownlists in my view. The number of dropdownlists is random because they are created dynamically based on the selected value of another dropdownlist.
Example:
in dropdownlist 1 I select bmw. Then 3 dropdownlists are created, so the user can give each carmodel a rate value. Each dropdownlist has id= the model of the car and the options you can select is 1,2 and 3. If there was 4 carmodels of bmw, the options would then be 1,2,3 and 4 and so on...
When I make the httppost call, how do I in the controller run through all the dynammically created dropdownlist and check the value and id?
EDIT:
The controller of my index view:
public class BookingPensionController : Controller
{
private DbEntities db = new DbEntities();
EditBookingPensionViewModel objViewModel;
public ActionResult Index()
{
objViewModel = new EditBookingPensionViewModel
{
Booking = new Booking { BookingStartDate = DateTime.Today, BookingEndDate = DateTime.Today, DateOfBooking = DateTime.Now }
};
objViewModel.deliveryTypes = new List<string>();
int id = int.Parse(Session["id"].ToString());
SelectList list;
try
{
var deliverytypes = from d in db.DeliveryTypes
where d.Pension_ID == id
select d;
foreach (DeliveryType item in deliverytypes)
{
objViewModel.deliveryTypes.Add(item.Titel);
}
ViewData["DeliveryTypes"] = objViewModel.deliveryTypes;
objViewModel.customersToPension = new List<SelectListItem>();
objViewModel.customersToPension = GetCustomersToPension(id);
}
catch (Exception ex)
{
throw;
}
int PensionId = int.Parse(Session["id"].ToString());
objViewModel.CustomerValue = GetCustomersToPension(PensionId);
return View(objViewModel);
}
My Index view:
#model HundePensionBooking.ViewModels.EditBookingPensionViewModel
//Some code...
//And my script that retreives the customerinfo and creates the dropdownlists
$("#ddlCustomerId").change(function () {
var id = $("#ddlCustomerId").val();
getCustomerInfo(id);
$('#customerinfo').load("#Url.Action("CustomerInfo", "BookingPension")");
var ddlsource = "#ddlCustomerId";
var ddltarget = "#ddlDogId";
$.getJSON('#Url.Action("Dogs_SelectedCustomer")', { CustomerId: $(ddlsource).val() }, function (data) {
$(ddltarget).empty();
$("#tblRooms tr:gt(0)").remove();
$.each(data, function (index, optionData) {
createDynamicTable($("#tblRooms"), optionData.Text, data.length);
});
});
});
});
</script>
<script type="text/javascript">
function createDynamicTable(tbody, value, count) {
if (tbody == null || tbody.length < 1) return;
var trow = $("<tr>");
var cellText = value
var option;
$('<th scope="row" abbr="Model" class="spec">')
.addClass("tableCell")
.text(cellText)
.appendTo(trow);
var ddlselectroom = '<td class="spectd"><select class="selectbox" id=' + value + '>';
for (var d = 1; d <= count; d++) {
ddlselectroom += '<option value="' + d + '">Bur nr. ' + d + '</option>';
}
ddlselectroom += '</select></td>';
$(ddlselectroom).appendTo(trow);
trow.appendTo(tbody);
}
//Some more code...
//And then the table which gets populated with the random number of dropdownlists:
<table id="tblRooms" width="100%">
<tr>
</tr>
</table>
The Viewmodel looks like this:
public class EditBookingPensionViewModel
{
public Booking Booking { get; set; }
public IEnumerable<Customer> customerList { get; set; }
public List<string> deliveryTypes { get; set; }
public List<SelectListItem> customersToPension { get; set; }
public Customer customer { get; set; }
public CustomerInfoModel CustomerInfo { get; set; }
My partialview with the customerinfo looks like this:
#model HundePensionBooking.Models.Customer
So when I make the httppost call
<input type="submit" value="Create" />
I need to get all the data down to my database. Im not sure on how to do that but I assume I have to do it with my Create method in the controller class
[HttpPost]
public ActionResult Create(EditBookingPensionViewModel model)
{
//SaveCustomer... From the CustomerInfo partialview
//SaveBooking...From Index view
//Save all the data from all the dropdownlists... from index view
}
just add a hidden field of counter, when you submit, get value of counter then loop from 1 to value of counter and request optionname + counter. jquery should be used to set the value of counter.

Jquery dynamic load dropdownlist

I have a problem about dynamic load dropdownlist. I debuged my ashx, it do post the data. But dropdownlist have no value.
Here is my Aspx page
<script type="text/javascript">
$(function() {
$.post("ContentLoad.ashx", function(datas) {
for(var i = 0; i < datas.length; i++) {
var data = datas[i];
var option = $("<option value='"+data.Id + "'>" +data.Title + "</option");
$("#ddlClassId").append(option);
}
},"json");
});
</script>
In the html have a dropdownlist.
<asp:DropDownList ID="ddlClassId" runat="server" AutoPostBack="True">
</asp:DropDownList>
And here is my ashx code:
public class ContentLoad : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
BLL.ChannelManeger bll = new BLL.ChannelManeger();
DataTable dt = bll.GetList(0, 0);
Data[] datas = new Data[dt.Rows.Count];
int i = 0;
foreach (DataRow dr in dt.Rows)
{
string id = dr["Id"].ToString();
int ClassLayer = int.Parse(dr["ClassLayer"].ToString());
string title = dr["Title"].ToString().Trim();
if (ClassLayer == 1)
{
datas[i++] = new Data() { Id = Convert.ToInt32(id), Title = title };
}
else
{
title = "├ " + title;
title = StringOfChar(ClassLayer - 1, " ") + title;
datas[i++] = new Data() { Id = Convert.ToInt32(id), Title = title };
}
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
context.Response.Write(serializer.Serialize(datas));
}
public static string StringOfChar(int strLong, string str)
{
string ReturnStr = "";
for (int i = 0; i < strLong; i++)
{
ReturnStr += str;
}
return ReturnStr;
}
public bool IsReusable
{
get
{
return false;
}
}
}
class Data
{
public int Id { get; set; }
public string Title { get; set; }
}
In your code there was a typo inside for loop and also since dropdown list is a server control, its id might change so you should not use id selector unless you use ClientID of the control. I have simplied your code using $.each loop take a look.
$(function() {
$.post("ContentLoad.ashx", function(datas) {
var $ddl = $("select[id*=ddlClassId]");
$.each(datas, function(){
$ddl.append("<option value='"+this.Id + "'>" +this.Title + "</option");
});
},"json");
});
look at this line: var data = data[i];
it should be var data = datas[i];

Resources