View
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<fieldset>
<br />
<br />
<br />
<div align="center">
#{
#(Html.Telerik().Grid<SmartTrack.Web.DAL.SysUserList>()
.DataBinding(dataBinding => dataBinding.Ajax().Select("Index", "User"))
.Name("UserList")
.DataKeys(keys => keys
.Add(c => c.UserName)
.RouteKey("UserName"))
.Columns(columns =>
{
columns.Bound(o => o.UserName).Width(100);
columns.Bound(o => o.FirstName).Width(200);
columns.Bound(o => o.LastName).Width(250);
columns.Bound(o => o.Active).ClientTemplate("<input type='checkbox' disabled='disabled' name='Active' <#=Active? checked='checked' : '' #> />").Width(70).HtmlAttributes(new { style = "text-align:center" }); ;
})
.Pageable(pagerAction => pagerAction.PageSize(20))
.Sortable()
.Selectable()
.Scrollable()
.Groupable()
.Filterable()
.HtmlAttributes(new { style = "width:50%;" })
)
}
</div>
<br/>
<div align="center">
<table>
<tr>
<td>
<button id="btnAdd" type="submit" style="height:40px;width:70px" ">Add</button>
</td>
<td>
<button style="height:40px;width:70px" ">Edit</button>
</td>
<td>
<button style="height:40px;width:70px" ">Delete</button>
</td>
</tr>
</table>
</div>
</fieldset>
<script type="text/javascript">
$(function () {
$('#btnAdd').click(function () {
$.ajax({
type: "POST",
url: '#Url.Action("Create","User")',
success: function (result) {
$('#cuscreate').html(result)
}
});
});
});
</script>
This view contain a script from which the UserController Create method is call when the add button is clicked
Control
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using SmartTrack.Web.Attributes;
using SmartTrack.Web.Models;
using SmartTrack.Web.DAL;
using Telerik.Web.Mvc;
namespace SmartTrack.Web.Controllers
{
public class UserController : Controller
{
SMARTTrackerEntities db = new SMARTTrackerEntities();
//
// GET: /User/
[GridAction]
public ActionResult Index()
{
//ViewData["UserGroup"] = DisplayContentEngine.getUserGroupList();
return View(new GridModel(UserListEngine.getAllSystemUser()));
}
[HttpPost]
public ActionResult Create()
{
ViewData["Location"] = DisplayContentEngine.getLocationList();
ViewData["Branch"] = DisplayContentEngine.getBranchList();
//var v = ViewData.Model = UserListEngine.getAllSystemUser();
var user = new SysUserList();
return View(user);
}
[HttpPost]
public ActionResult Create(SysUserList user)
{
try
{
// TODO: Add insert logic here
if (ModelState.IsValid)
{
//Save Registration
db.SysUserLists.AddObject(user);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(user);
}
catch
{
return View();
}
}
public ActionResult Edit(string username)
{
SysUserList sysuserlist = db.SysUserLists.Single(s => s.UserName == username);
return View(sysuserlist);
}
}
}
This controller that is called
Create View
#model SmartTrack.Web.DAL.SysUserList
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
<div id="cuscreate">
<fieldset>
<table>
<tr>
<td>
<label>First Name</label>
</td>
<td>
#Html.TextBoxFor(model => model.FirstName)
</td>
<td>
<label>Last Name</label>
</td>
<td>
#Html.TextBoxFor(model => model.LastName)
</td>
</tr>
<tr>
<td>
<label>User Name</label>
</td>
<td>
#Html.TextBoxFor(model => model.UserName)
</td>
<td>
<label>Password</label>
</td>
<td>
#Html.PasswordFor(model => model.userPwd)
</td>
</tr>
<tr></tr>
<tr>
<td>
<label>Location</label>
</td>
<td>
#(Html.Telerik().DropDownList()
.Name("ddLocation")
.BindTo((IEnumerable<DropDownItem>)ViewData["Location"])
.CascadeTo("ddlBranch")
)
</td>
<td>
<label>Branch</label>
</td>
<td>
#(Html.Telerik().DropDownList()
.Name("ddlBranch")
.BindTo((IEnumerable<DropDownItem>)ViewData["Branch"])
)
</td>
</tr>
</table>
</fieldset>
</div>
}
When the add button is click nothing happen can someone tell my whats my issue?
Thanks in advance
Regards
Kurt
I cannot see the form tags in your html that could be the reason where it does not know where to post
The view with action link Create New and the telerik grid does not have form tags in it
Make sure you cancel the default action of the submit button by returning false from your click handler in order to give your AJAX call chance to execute:
<script type="text/javascript">
$(function () {
$('#btnAdd').click(function () {
$.ajax({
type: "POST",
url: '#Url.Action("Create", "User")',
success: function (result) {
$('#cuscreate').html(result)
}
});
});
return false; // <!-- That's the important bit
});
</script>
You don't have a data element in your ajax request, so you are POSTing nothing.
If you want to get the data from the form you can just use .serialize():
$.ajax({
type: "POST",
data: $('form').serialize(),
url: '#Url.Action("Create","User")',
success: function (result) {
$('#cuscreate').html(result)
}
});
Keep in mind, this will only work if its the only on the page, otherwise you should use another selector, but you get the idea.
UPDATE from HatSoft's answer (upvote it!):
generally inside your tags you should have tags, to do that in MVC:
<fieldset>
#using(Html.BeginForm())
{
<p>your form</p>
}
</fieldset>
In correcting my problem I had to modify my index view to include div id = cuscreate which resulted in the CreateUser view displaying
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div id="cuscreate" align="center">
<fieldset>
<br />
<br />
<br />
#using (Html.BeginForm())
{
//#{
#(Html.Telerik().Grid<SmartTrack.Web.DAL.SysUserList>()
.DataBinding(dataBinding => dataBinding.Ajax().Select("Index", "User"))
.Name("UserList")
.DataKeys(keys => keys
.Add(c => c.UserName)
.RouteKey("UserName"))
.Columns(columns =>
{
columns.Bound(o => o.UserName).Width(100);
columns.Bound(o => o.FirstName).Width(200);
columns.Bound(o => o.LastName).Width(250);
columns.Bound(o => o.Active).ClientTemplate("<input type='checkbox' disabled='disabled' name='Active' <#=Active? checked='checked' : '' #> />").Width(70).HtmlAttributes(new { style = "text-align:center" }); ;
})
.Pageable(pagerAction => pagerAction.PageSize(20))
.Sortable()
.Selectable()
.Scrollable()
.Groupable()
.Filterable()
.HtmlAttributes(new { style = "width:50%;" })
)}
</fieldset>
<br/>
<div align="center">
<table>
<tr>
<td>
<button id="btnAdd" type="submit" style="height:40px;width:70px" ">Add</button>
</td>
<td>
<button style="height:40px;width:70px" ">Edit</button>
</td>
<td>
<button style="height:40px;width:70px" ">Delete</button>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#btnAdd').click(function () {
$.ajax({
type: "POST",
data: $('form').serialize(),
url: '#Url.Action("CreateUser", "User")',
success: function (result) {
$('#cuscreate').html(result)
}
});
});
return false; // <!-- That's the important bit
});
</script>
Thanks for your assistance was really appreciated
Regards
Kurt
Related
Hi Everyone, I try to used the modal to avoid having multiple pages. but I got a problem, first, I click the view button and it will display to modal the right information; but when I click other view button instead the next data, it display the previous data.
second, after I select the view button and try to select the new shoes button (expectation must be display the new module in modal) it display the data of the previous item I select in view button:
Controller:
public ActionResult Index() //main page
{
var result = _Context.Shoeses.Include(x => x.Supply).ToList();
return View(result);
}
public ActionResult New() //create new product
{
var SupplierCategory = _Context.Suppliers.ToList();
var listOfSupplier = new ShoesViewModel
{
Supply = SupplierCategory
};
return PartialView(listOfSupplier);
}
public ActionResult Details(int id) //view selected data
{
Shoes productItem = new Shoes();
productItem = _Context.Shoeses.Find(id);
return PartialView("_Details", productItem);
}
View: Index
#model IEnumerable<ShoeInformation.Models.Shoes>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<br />
<h2>Tindahan sa Bahay ni Tatang Benjamin</h2>
<br />
<br />
//my modal
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3 class="modal-title">Details</h3>
</div>
<div class="modal-body" id="modalBody">
Testing Only
</div>
</div>
</div>
</div>
//my modal
<p>#Html.ActionLink("New Shoes", "New", "Shoes", new { id="btn_Modal"}, new { #class = "btn btn-primary btn-lg",#data_toggle="modal" ,#data_target="#myModal"})</p>
<table class="table table-striped table-hover ">
<tr>
<th>Product ID
</th>
<th>Product Code
</th>
<th>Product Name
</th>
<th>Item Size
</th>
<th>Supplier
</th>
<th>Available Quantity
</th>
<th>Unit Price (Php)
</th>
<th>Action
</th>
</tr>
#foreach (var shoes in Model)
{
<tr class="success">
<td>
#shoes.Id
</td>
<td>
#shoes.ProductCode
</td>
<td>
#Html.ActionLink(#shoes.ProductName, "Edit", "Shoes", new { id=shoes.Id})
</td>
<td>
#shoes.ItemSize
</td>
<td>
<input type="hidden" value="#shoes.Id" id="hiddenval" />
#Html.HiddenFor(x => shoes.Id)
#Html.DisplayFor(x => shoes.Supply.SupplierName)
</td>
<td>
#shoes.ItemQty
</td>
<td>
#shoes.ItemUnitPrice
</td>
<td>
#Html.ActionLink("View", "Details", "Shoes", new { id=shoes.Id}, new { #class = "view-Modal",#data_toggle="modal" ,#data_target="#myModal"})
</td>
</tr>
}
</table>
#*Open Modal Testing*#
#section scripts
{
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#myModal').hide();
$("#btn_Modal").click(function () {
$('#myModal').modal('show');
});
$(".view-Modal").click(function () {
var productId =
$(this).closest('tr').find('#hiddenval').val();
$.ajax({
type: 'POST',
url: '/Shoes/Details',
data: { id: productId },
success: function (response)
{
$('#modalBody').html(response);
$('#myModal').modal('show');
}
});
})
$(".close").click(function ()
{
console.log("Clear All");
});
});
</script>
}
partial view: _details
#model ShoeInformation.Models.Shoes
<div>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
<table class="tablemodel">
<tr>
<tr>
#Html.DisplayFor(x=>x.Id)
</tr>
<tr>
#Html.DisplayFor(x=>x.ProductName)
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
I try to breakpoint to see the problem but everything is working properly, however in the modal it display the same value
can someone please help me regarding to this matter
thanks in advance
I was trying to implement change event equivalent in MVC dropdownlist where it will fill the table below with relavant data from database.
But my Ajax call is not hitting the controller action method. can anybody tell me where I am mistaken
View and vavascript
#model WebArtSampler.Models.AssignRequestModel
#{
ViewBag.Title = "AssignRequest";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>AssignRequest</h2>
#using (Html.BeginForm("AssignRequestNew", "SamCutAssignmentMasters"))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.CutAssignID)
<div class="form-group">
#Html.LabelFor(model => model.CutAssignID, "Cutting Request #", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#*#Html.DropDownListFor(model => model.CutAssignID, (SelectList)ViewBag.CutAssignID, "--Select One--", htmlAttributes: new { #class = "form-control" })*#
#Html.DropDownList("Id", (SelectList)ViewBag.CutAssignID, htmlAttributes: new { #class = "form-control" })
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<div id="div1">
<table class="table">
<tr>
<th>
Req#
</th>
<th>
Buyer
</th>
<th>
Pattern Ref#
</th>
<th>
Style
</th>
<th>
Style Description
</th>
<th>
Fabric
</th>
</tr>
#foreach (var student in Model.Reqnumlist)
{
<tr>
<td>
#student.ReqNum
</td>
<td>
#student.BuyerName
</td>
<td>
#student.PatterRefNum
</td>
<td>
#student.StyleName
</td>
<td>
#student.StyleDescription
</td>
<td>
#student.Fabric
</td>
</tr>
}
</table>
</div>
JQuery I used is
<script type="text/javascript">
$(document).ready(function () {
debugger;
$("#Id").change(function () {
debugger
var Id = $(this).find('option:selected').val();
$.ajax({
url: "#Url.Action("PopulateDetails","SamCutAssignmentMasters")",
type: 'Get',
contentType: "application/json; charset=utf-8",
dataType: 'json',
data: { 'Id': Id },
success: function (data) {
if (data.success) {
debugger
document.getElementById("ProductName").value = data.productName;
}
else {
alert('invalid ID' + data.success);
}
}
});
});
});
</script>
Model
public class SamCutAssignmentMastersController : Controller
{
[HttpGet]
public JsonResult PopulateDetails(int id)
{
return Json(GetDetailsofaspecificTicket(id));
}
}
Firstly, check the specification for UrlHelper.Action, you're trying to use this overload:
public virtual string Action(
string actionName,
string controllerName
)
You have the action and controller names the wrong way round. In circumstances like this it's usually worth doing a "View source" on your code, you could have then seen that the url was incorrect.
Also you will need to update the syntax of your ajax call where you are passing the id parameter to:
data: { 'Id': Id },
i am working on an application. i am using two partial view in a single view. one of them is a create form for shortcode and the other one lists the shortcodes having a pagination.
this is my create form which is partial view
#model UniProject.Models.Short_Code
<div id="formDiv">
#using (Ajax.BeginForm("Create", "Service", new AjaxOptions { HttpMethod = "post" , UpdateTargetId = "formDiv" }))
{
<table>
<tr>
<td>#Html.LabelFor(model => model.ServiceCode)</td>
<td>#Html.TextBoxFor(model => model.ServiceCode , new { #class = "form-control input-sm"})</td>
</tr>
<tr>
<td></td>
<td>#Html.ValidationMessageFor(model => model.ServiceCode , "", new { #class = "text-danger"})</td>
</tr>
<tr>
<td>#Html.LabelFor(model => model.Service)</td>
<td>
#Html.DropDownList("Service" ,new List<SelectListItem> {
new SelectListItem { Text = "Select" , Value = ""},
new SelectListItem { Text = "Package" , Value = "Package"},
new SelectListItem { Text = "Per-SMS" , Value = "Per-SMS"},
new SelectListItem { Text = "Barcode" , Value = "Barcode"}
}, new { #class = "form-control input-sm" })
</td>
</tr>
<tr>
<td></td>
<td>#Html.ValidationMessageFor(model => model.Service , "" , new { #class = "text-danger"})</td>
</tr>
<tr>
<td><input type="submit" value="Submit" class="btn btn-default btn-sm"/></td>
<td>#ViewBag.Record</td>
</tr>
</table>
}
this is my list which is also a partial view
#model IEnumerable<UniProject.Models.Short_Code>
<table class="table table-condensed table-bordered table-hover table-striped">
<tr>
<th>
Shortcode
</th>
<th>
Service
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ServiceCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.Service)
</td>
</tr>
}
this is index view
#model PagedList.IPagedList<UniProject.Models.Short_Code>
#using PagedList.Mvc
<link type="text/css" rel="stylesheet" href="~/Content/PagedList.css" />
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3>Service Management</h3>
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"> </script>
<div class="col-lg-4">
#Html.Partial("_shortcode_form")
</div>
<div class="col-lg-8">
#Html.Partial("_shortcode_table")
</div>
<div id="pager">
#Html.PagedListPager(
Model ,
page => Url.Action(
"Index" ,
new {
page = page
}
)
)
</div>
<script>
$(function () {
$("#pager").on('click', 'a', function () {
$.ajax({
url: this.href,
type: 'GET',
cashe: false,
success: function (respons) {
$('#table').html(respond);
}
})
return false;
})
});
</script>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
this is controller
public ActionResult Index(int? page)
{
var codes = db.Codes.AsQueryable();
codes = codes.OrderBy(c => c.Id);
if (Request.IsAjaxRequest())
{
return PartialView("_shortcode_table", codes.ToPagedList(pageNumber: page ?? 1, pageSize: 2));
}
return View(codes.ToPagedList(pageNumber: page ?? 1, pageSize: 2));
}
the problem is that when i pass this
codes.ToPagedList(pageNumber: page ?? 1, pageSize: 2)
to the view, this error generates
The model item passed into the dictionary is of type
'PagedList.PagedList`1[UniProject.Models.Short_Code]', but this
dictionary requires a model item of type
'UniProject.Models.Short_Code'.
please help how can is solve this issue. any help or assist would be welcome.
I have 2 seperate views and each of them call upon a controller that uploads a file. They both work okay the 1st time I use them, however for some unkown reason when i switch views the controllers from each view are swapped!! I double checked and i call each controller correctly. So i have no idea why the controllers are swapped between views!
Here is where I input the file:
<div class="options">
<input type="button" id="importexcel" name="importexcel" class="k-button" value="Select Excel File" />#*#T("Admin.Common.ImportFromExcel")" />*#
</div>
using(Html.BeginForm("GetFile", "Product", FormMethod.Post, new { EncType = "multipart/form-data" }))
{
<br />
}
<div id="importexcel-window" style="display:none;">
#using (Html.BeginForm("GetFile", "Product", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
#Html.HiddenFor(x => x.Id)
<table style="text-align:left;">
<tr>
<td colspan="2">
<em>#T("Admin.Catalog.Products.List.ImportFromExcelTip")</em>
</td>
</tr>
<tr>
<td>
#T("Admin.Common.ExcelFile"):
</td>
<td>
<input type="file" id="importexcelfile" name="importexcelfile" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" class="k-button" value="#T("Admin.Common.ImportFromExcel")" />
</td>
</tr>
</table>
}
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#importexcel").click(function (e) {
e.preventDefault();
var window = $("#importexcel-window");
if (!window.data("kendoWindow")) {
window.kendoWindow({
modal: true,
width: "400px",
title: "#T("Admin.Common.ImportFromExcel")",
actions: ["Close"]
});
}
window.data('kendoWindow').center().open();
});
});
</script>
And here is the respective controller:
[HttpPost]
public ActionResult GetFile(int Id, HttpPostedFileBase importexcelfile)
{
/* read data from file */
var file = System.Web.HttpContext.Current.Request.Files[0];
FileChoosen = true;
FilePath = importexcelfile;
if (file.ContentLength > 0)
{
/* load and show data */
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/Administration/Content/Excel/"), fileName);
file.SaveAs(path);
}
return RedirectToAction("Edit", new { id = Id });
}
As mentioned above i have another input controller alike to this one in a different view with a different name: (notice its exactly alike the one on top but with a different name "GetXML" and "importXMLfile"
Here is the controller
[HttpPost]
public ActionResult GetXML(int Id, HttpPostedFileBase importXMLfile)
{}
And here is where i input it:
<div id="importexcel-window" style="display:none;">
#using (Html.BeginForm("GetXML", "Product", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
#Html.HiddenFor(x => x.Id)
<table style="text-align:left;">
<tr>
<td>
#T("Admin.Common.ExcelFile"):
</td>
<td>
<input type="file" id="importXMLfile" name="importXMLfile" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" class="k-button" value="#T("Admin.Common.ImportFromExcel")" />
</td>
</tr>
</table>
}
I have form which contains some text filed for filling data. I want to fill data in text box after dropdownlist changed.
MyView.chstml
#model BloodBank.Models.NewCamp
#{
ViewBag.Title = "New Camp";
Layout = "~/Views/Shared/_Layout - Menu.cshtml";
}
<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>
<script type="text/javascript">
$(function () {
$("select#OrganisationID").change(function (evt) {
if ($("select#OrganisationID").val() != "0") {
$.ajax({
url: "GetOrganizationInfo?orgID=" + $("select#OrganisationID").val(),
type: 'POST',
data: { OS: $("select#OrganisationID").val() },
success: function (response) {
$("select#OrganisationID").replaceWith(response)
},
error: function (xhr) {
alert("Something went wrong, please try again");
}
});
}
});
});
</script>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true, "New Camp creation was unsuccessful. Please correct the errors and try again.")
<div>
<table style="border-style:none;border-width:0;border:0;">
<tbody>
<tr>
<td style="border:0;vertical-align:middle;">
<div class="editor-label">
#Html.LabelFor(m => m.OrganisationID)
</div>
</td>
<td style="border:0;">
<div class="editor-field">
#Html.DropDownListFor(m => m.OrganisationID, (SelectList)ViewBag.OrganisationList)
#* <select id="Area">
#foreach (var arearow in (SelectList)ViewBag.OrganisationList)
{
<option value="#arearow.Value">#arearow.Text</option>
}
</select>*#
#Html.ActionLink("Add New Organisation", "AddOrganisation", "Organisation", null, null)
</div>
</td>
<td style="border:0;">
<div class="editor-field">
#Html.ValidationMessageFor(m => m.OrganisationID)
</div>
</td>
</tr>
<tr>
<td style="border:0;text-align:left;" colspan="2"> <h3>Contact Person Information</h3></td>
</tr>
<tr>
<td style="border:0;">
<div class="editor-label">
#Html.LabelFor(m => m.Email)
</div>
</td>
<td style="border:0;">
<div class="editor-field">
#Html.TextBoxFor(m => m.Email)
#Html.ValidationMessageFor(m => m.Email)
</div>
</td>
</tr>
<tr>
<td style="border:0;">
<div class="editor-label">
#Html.LabelFor(m => m.FirstName)
</div>
</td>
<td style="border:0;">
<div class="editor-field">
#Html.TextBoxFor(m => m.FirstName)
#Html.ValidationMessageFor(m => m.FirstName)
</div>
</td>
</tr>
<tr>
<td style="border:0;">
<div class="editor-label">
#Html.LabelFor(m => m.LastName)
</div>
</td>
<td style="border:0;">
<div class="editor-field">
#Html.TextBoxFor(m => m.LastName)
#Html.ValidationMessageFor(m => m.LastName)
</div>
</td>
</tr>
<tr>
<td style="border:0;">
<div class="editor-label">
#Html.LabelFor(m => m.Phone)
</div>
</td>
<td style="border:0;">
<div class="editor-field">
#Html.TextBoxFor(m => m.Phone)
#Html.ValidationMessageFor(m => m.Phone)
</div>
</td>
</tr>
<tr>
<td colspan="2" style="border:0;text-align:center;">
</td>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" id="ClickMe" class="cssLoginButton blue"/>
</div>
}
My Action
[Authorize]
[OutputCache(Location = OutputCacheLocation.None)]
public ActionResult NewCamp()
{
var user = (BloodBank.Security.BloodBankMembershipUser)Membership.GetUser();
this.BindOrganisations(user.BloodBankID);
return View();
}
public ActionResult GetOrganizationInfo(string orgID)
{
if (!string.IsNullOrEmpty(orgID))
{
var model = (new UserManager()).GetCampPersonOrganisationDetailsByOrganisationID(orgID);
Models.NewCamp newcampModel = new Models.NewCamp();
if (model.Count > 0)
{
newcampModel.CampID = model[0].CampID;
newcampModel.Organisation = "";
newcampModel.OrganisationID = model[0].OrganisationID;
newcampModel.FirstName = model[0].FirstName;
newcampModel.LastName = model[0].LastName;
newcampModel.Email = model[0].Email;
newcampModel.Phone = model[0].Phone;
var organisations = this.GetOrganisations(model[0].BloodBankID);
if (organisations != null)
ViewBag.OrganisationList = new SelectList(organisations, "OrganisationID", "NameCity");
}
return View("NewCamp", newcampModel);
}
else
return View();
}
I am not able to fill data in the form. I am not getting why I am not able to fill data. Is there any change in script or in my code? Is there any example to fill data after dropdownlist value changed?
--------- Update------------
I have tried similar thing on a sample project. Here I can fetch the values and display in text box, but I get one more view added on same View every time I choose OS from dropdown as in below screenshot.
the only flaw in the code you posted might be a missing ;
success: function (response) {
$("select#OrganisationID").replaceWith(response);
},
Hello Everyone I have solved my problem using this. There is no need to create any javascript. I have solved this without using javascript.
#Html.DropDownListFor(m => m.OrganisationID, (SelectList)ViewBag.OrganisationList, new { onchange = "document.location.href = 'NewCamp?orgID=' + this.options[this.selectedIndex].value;" })