We Keep Coding

Converting Json Post Back Data To XML

This is my first web app project. I am using VS community, asp.net, bootstrap 4, C# and JS knockout for my view model, the server side data is coming from the company ERP SQL database using Entity Framework.
The idea is that the user receives a list of items to approve from the Company ERP system, which are loaded into the View Model. The View Model is structured as a JS Knockout observable array and that each item is a JS knockout item of observables (see full code below)
Once the user has processed the items as desired, I want the web app to post back the whole View Modal as a Json object and for the server Post Controller to take this Json object convert it to xml to send into a SQL stored procedure for insertion into the SQL database, from the SQL database the data will be handled and inserted into the ERP database
When I try to action the Post I get a 405 "Method Not Allowed"
> "tags": {
"ai.cloud.roleInstance": "[MYCOMPUTER].local",
"ai.operation.id": "c07680cd8c845240a9e3791018c39521",
"ai.operation.name": "POST ReqsTests",
"ai.location.ip": "::1",
"ai.internal.sdkVersion": "web:2.8.0-241",
"ai.internal.nodeName": "[MYCOMPUTER].local"
},
"data": {
"baseType": "RequestData",
"baseData": {
"ver": 2,
"id": "|c07680cd8c845240a9e3791018c39521.66f8d951_",
"name": "POST ReqsTests",
"duration": "00:00:00.0279394",
"success": false,
"responseCode": "405",
"url": "http://localhost:64234/api/ReqsTests/",
"properties": {
"DeveloperMode": "true",
"_MS.ProcessedByMetricExtractors": "(Name:'Requests', Ver:'1.1')"
}
}
}
}
I think that I am not receiving the Json Date from the client correctly. My thinking is because I am sending the whole model back, which is a Json list, which but My controller does not receiver a List rather a string.
Can any one explain how my controller should receive the client side data
Here is my call to my Controller from the client and the server Post controller and full code listing is below
self.postAllReqs = function(self) {
self.error(''); // Clear error message
var data = ko.toJSON(self.Reqs); // convert to json
console.log(data);
ajaxHelper(reqsUri, 'POST', data).fail(function (jqXHR, textStatus, errorThrown) {
self.error(errorThrown);
});
}
// POST: api/ReqsTests
public IHttpActionResult PostReqsTest(string json)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
XmlDocument doc = JsonConvert.DeserializeXmlNode(json);
try
{
//SQL store procedure
SqlParameter param1 = new SqlParameter("#XmlIn", doc);
db.Database.ExecuteSqlCommand("exec [CHC_Web].[TestWebHandShake],#XmlIn",
param1);
}
catch (Exception e)
{
string message = e.Message;
return ResponseMessage(Request.CreateErrorResponse(HttpStatusCode.InternalServerError, message));
}
return Ok();
}
Thanks
View Model Code
function ReqsTest(rt) {
rt = rt || {};
var self = this;
self.id = ko.observable(rt.ID || 0);
self.requisition = ko.observable(rt.Requisition || "");
self.reqnStatus = ko.observable(rt.ReqnStatus || "");
self.dateReqnRaised = ko.observable(rt.DateReqnRaised|| null);
self.reqnValue = ko.observable(rt.ReqnValue || null);
self.approvedValue = ko.observable(rt.ApprovedValue || null);
self.originator = ko.observable(rt.Originator || "");
self.origName = ko.observable(rt.OrigName || "");
self.origEmail = ko.observable(rt.OrigEmail || "");
self.line = ko.observable(rt.Line || 0.00);
self.indx = ko.observable(rt.INDX || 0);
self.dateReqnRaisedL = ko.observable(rt.DateReqnRaisedL || null);
self.reqStatus = ko.observable(rt.ReqStatus || "");
//self.reqBackground = ko.observable(rt.ReqBackground || "");
//Computed observables
self.reqBackground = ko.computed(function () {
// get variable
var status = self.reqStatus();
if (status == "A") { return "card-heading bg-success text-white"; }
else if (status == "D") { return "card heading bg-secondary"; }
else if (status == "R") { return "card heading bg-warning"; }
else if (status == "E") { return "card heading bg-danger"; }
else {
return "card-heading bg-primary text-white";
}
})
self.reqStatusLabel = ko.computed(function () {
// get variable
var status = self.reqStatus();
if (status == "A") { return "Approved"; }
else if (status == "D") { return "Declined - put on hold"; }
else if (status == "R") { return "Routing On"; }
else if (status == "E") { return "Erase On Syspro"; }
else {
return "Awaiting Approval";
}
})
self.approvalBtn = ko.computed(function () {
// get variable
var status = self.reqStatus();
if (status == "A") { return "css: button btn-secondary "; }
else {
return "btn btn-success ";
}
})
self.approvalBtnLbl = ko.computed(function () {
// get variable
var status = self.reqStatus();
if (status == "W") { return "Approve"; }
else {
return "UnApprove";
}
})
self.declineBtnLbl = ko.computed(function () {
// get variable
var status = self.reqStatus();
if (status == "D") { return "UnDecline"; }
else {
return "Decline";
}
})
self.deleteBtnLbl = ko.computed(function () {
// get variable
var status = self.reqStatus();
if (status == "E") { return "Restore"; }
else {
return "Erase";
}
})
// Functions
//show details alert
$(".btn").on("click", function () {
$(".alert").removeClass("in").show();
$(".alert").delay(200).addClass("in").fadeOut(2000);
});
}
function ReqsViewModel (){
var self = this;
self.Reqs = ko.observableArray([]);
self.error = ko.observable();
var reqsUri = '/api/ReqsTests/';
function ajaxHelper(uri, method, data) {
self.error(''); // Clear error message
return $.ajax({
type: method,
url: uri,
dataType: 'json',
contentType: 'application/json',
data: data ? JSON.stringify(data) : null
}).fail(function (jqXHR, textStatus, errorThrown) {
self.error(errorThrown);
});
}
function getAllReqs() {
ajaxHelper(reqsUri, 'GET').done(function (data) {
// Build the ReqsTest objects
var reqs = ko.utils.arrayMap(data, function (rt) {
return new ReqsTest(rt);
});
self.Reqs(reqs);
});
}
self.postAllReqs = function(self) {
self.error(''); // Clear error message
var data = ko.toJSON(self.Reqs); // convert to json
console.log(data);
ajaxHelper(reqsUri, 'POST', data).fail(function (jqXHR, textStatus, errorThrown) {
self.error(errorThrown);
});
}
// Details
self.detail = ko.observable();
self.getReqDetail = function (item) {
//var url = reqsUri + item.indx();
//ajaxHelper(url, 'GET').done(function (data) {
// self.detail(data);
//}
//);
self.detail(item)
}
//Approval function
self.Approval = function (item) {
var status = item.reqStatus();
if (status == "W") { item.reqStatus("A"); }
else
{ item.reqStatus("W"); }
self.getReqDetail(item);
}
//Decline function
self.Decline = function (item) {
var status = item.reqStatus();
if (status == "D") { item.reqStatus("W"); }
else { item.reqStatus("D"); }
self.getReqDetail(item);
}
//Delete function
self.Delete = function (item) {
var status = item.reqStatus();
if (status == "E") { item.reqStatus("W"); }
else { item.reqStatus("E"); }
self.getReqDetail(item);
}
// Load the reqs - Take this out if you don't want it
getAllReqs();
}
ko.applyBindings(new ReqsViewModel());
Model Class
namespace POC_Reqs_v1.Models
{
using System;
using System.Collections.Generic;
public partial class ReqsTest
{
public string ID { get; set; }
public string Requisition { get; set; }
public string ReqnStatus { get; set; }
public Nullable<System.DateTime> DateReqnRaised { get; set; }
public Nullable<decimal> ReqnValue { get; set; }
public Nullable<decimal> ApprovedValue { get; set; }
public string Originator { get; set; }
public string OrigName { get; set; }
public string OrigEmail { get; set; }
public decimal Line { get; set; }
public long INDX { get; set; }
public string DateReqnRaisedL { get; set; }
public string ReqStatus { get; set; }
public string ReqBackground { get; set; }
}
}
Controller Code
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading.Tasks;
using System.Web.Http;
using System.Web.Http.Description;
using System.Xml;
using Newtonsoft.Json;
using POC_Reqs_v1.Models;
namespace POC_Reqs_v1.Controllers
{
public class ReqsTestsController : ApiController
{
private ChamberlinWebEntities db = new ChamberlinWebEntities();
// GET: api/ReqsTests
public IQueryable<ReqsTest> GetReqsTests()
{
return db.ReqsTests;
}
// GET: api/ReqsTests/5
[ResponseType(typeof(ReqsTest))]
public async Task<IHttpActionResult> GetReqsTest(string id)
{
var ID = Convert.ToInt64(id);
ReqsTest reqsTest = await db.ReqsTests.FindAsync(ID);
if (reqsTest == null)
{
return NotFound();
}
return Ok(reqsTest);
}
// PUT: api/ReqsTests/5
[ResponseType(typeof(void))]
public async Task<IHttpActionResult> PutReqsTest(string id, ReqsTest reqsTest)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
if (id != reqsTest.ID)
{
return BadRequest();
}
db.Entry(reqsTest).State = EntityState.Modified;
try
{
await db.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!ReqsTestExists(id))
{
return NotFound();
}
else
{
throw;
}
}
return StatusCode(HttpStatusCode.NoContent);
}
// POST: api/ReqsTests
public IHttpActionResult PostReqsTest(string json)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
XmlDocument doc = JsonConvert.DeserializeXmlNode(json);
try
{
//SQL store procedure
SqlParameter param1 = new SqlParameter("#XmlIn", doc);
db.Database.ExecuteSqlCommand("exec [CHC_Web].[TestWebHandShake],#XmlIn",
param1);
}
catch (Exception e)
{
string message = e.Message;
return ResponseMessage(Request.CreateErrorResponse(HttpStatusCode.InternalServerError, message));
}
return Ok();
}
// DELETE: api/ReqsTests/5
[ResponseType(typeof(ReqsTest))]
public async Task<IHttpActionResult> DeleteReqsTest(string id)
{
ReqsTest reqsTest = await db.ReqsTests.FindAsync(id);
if (reqsTest == null)
{
return NotFound();
}
db.ReqsTests.Remove(reqsTest);
await db.SaveChangesAsync();
return Ok(reqsTest);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
private bool ReqsTestExists(string id)
{
return db.ReqsTests.Count(e => e.ID == id) > 0;
}
}
}

For completeness here was my final solution:
The main problem was the syntax error in the post controller, which did not create an error when compiled, the line that was incorrect was
// POST: api/ReqsTests
public IHttpActionResult PostReqsTest(string json)
The correct syntax was in the end
public async Task<IHttpActionResult> PostReqsTest(object json)
So the full controller code is was
// POST: api/ReqsTests
public async Task<IHttpActionResult> PostReqsTest(object json)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
//convert the Json model to xml
XmlDocument doc = JsonConvert.DeserializeXmlNode(json.ToString());
try
{
//SQL store procedure
SqlParameter param1 = new SqlParameter("#XmlIn", doc.InnerXml);
db.Database.ExecuteSqlCommand("exec [CHC_Web].[TestWebHandShake] #XmlIn",
param1);
}
catch (Exception e)
{
string message = e.Message;
return ResponseMessage(Request.CreateErrorResponse(HttpStatusCode.InternalServerError, message));
}
return ResponseMessage(Request.CreateResponse HttpStatusCode.OK,"Inserted to database")); }

JSON stringify not serialising ? Bind issue

In the controller WidgetConfigurationRequestVM request object
is returning 3 properties (lists) as null
jurisidctions
tags
workareas
I have binded this in the view and I am sure there is data set. They have same method types IEnumerable, why companyid binding and the other properties not binding in WidgetConfigurationRequestVM? Thank you for help!
API Controller:
[Route("api/track/v1/taxibriefing")]
public async Task<TaxiContainerModel> Post([FromBody] WidgetConfigurationRequestVM request)
{
request.Jurisidctions/tags/workareas = null?
request.companyId = exists
}
JS:
taxiBriefingButton.click(function (e) {
e.preventDefault();
var widgets = taxiConfigurationContainer.serialize();
var workAreaRefs = $(this).data("workarearefs");
var jurisdictions = $(this).data("jurisdictions");
var tags = $(this).data("tags");
var preset = $(this).data("preset");
createPdf($(this).data('companyid'), widgets, $('#notes').val(), workAreaRefs, jurisdictions, tags);
});
JS create PDF button:
function createPdf(companyId, widgets, notes, workAreaRefs, jurisdictions, tags) {
var doc = new PDFDocument({
bufferPages: true,
size: [842, 595]
});
window.dispatchEvent(GeneratingTaxiBriefingEvent);
var xhr = new XMLHttpRequest();
xhr.open('GET', '/taxiFonts/Roboto-Light.ttf', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
if (this.status == 200) {
doc.registerFont('Roboto', xhr.response);
$.ajax({
type: 'POST',
url: '/api/track/v1/taxibriefing',
contentType : 'application/json',
data: JSON.stringify({ CompanyId: companyId, Notes: notes, Configuration: widgets, Workareas: workAreaRefs, Jurisdictions: jurisdictions, Tags: tags }),
dataType: 'json',
success: function (result) { GeneratePDF(doc, result); }
});
}
};
xhr.send();
}
View:
#model Areas.Track.Models.TrackVM
<button id="taxi-briefing" class="btn btn-danger" data-preset="#Model.Filter.DatePreset" data-workarearefs="#Model.Filter.WorkareaRefs" data-jurisdictions="#Model.Filter.JurisdictionRefs" data-tags="#Model.Filter.TagsRefs" data-companyid="#Model.Filter.FirmRefs.First()">Create PDF</button>
Viewmodel:
public class WidgetConfigurationRequestVM
{
public int CompanyId { get; set; }
public string Notes { get; set; }
public IEnumerable<WidgetConfigurationVM> Configuration { get; set; }
public IEnumerable<int> Workareas { get; set; }
public IEnumerable<int> Jurisdictions { get; set; }
public IEnumerable<int> Tags { get; set; }
}

List of Objects sent to the controller from jQuery are always null

So this is my class that of my model:
[Table("Question", Schema = "trs")]
public class Question
{
[Key]
public int QuestionId { get; set; }
[ForeignKey("TranType")]
[Required]
public int TranTypeId { get; set; }
[ForeignKey("Company")]
[Required]
public int CompanyId { get; set; }
[Required]
[StringLength(300)]
public string Text { get; set; }
[Required]
public bool IsActive { get; set; }
[ForeignKey("QuestionType")]
public int QTypeId { get; set; }
public DateTime CreatedDate { get; set; }
public string CreatedUserId { get; set; }
public DateTime UpdateDate { get; set; }
public string UpdateUserId { get; set; }
public Company Company { get; set; }
public QuestionType QuestionType { get; set; }
public TranType TranType { get; set; }
public ICollection<Answer> Answer { get; set; }
public ICollection<Grading> Grading { get; set; }
}
This is my controller action, for now it is doing nothing because I need to get the values first which are the problem:
[Authorize(Roles = "Admin")]
public class QuestionController : Controller
{
readonly IQuestionRepository questionRepository;
readonly ICompanyRepository companyRepository;
public QuestionController(IQuestionRepository qRepository, ICompanyRepository cpnRepository)
{
questionRepository = qRepository;
companyRepository = cpnRepository;
}
[HttpPost]
public ActionResult Save([FromBody] List<Question> qView)
{
return View(qView);
}
}
Now I have tried also:
[HttpPost]
public ActionResult Save(List<Question> qView)
{
return View(qView);
}
In both cases I have problems; in the first option (with [FromBody]) qView is null; and in option 2 (without [FromBody]) qView is not null but the List is empty (Count == 0).
Here is the Code to generate the JSON data:
function Send()
{
var qCounter = parseInt($('#quesCounter').val());
var listQuestion = [];
var qView = {};
qView.Questions = listQuestion;
for (i = 1; i <= qCounter; i++)
{
var question = {};
var listAnswer = [];
question.Answers = listAnswer;
var anCounter = parseInt($('#qtCounter' + i).val());
var qText = $('#qtText' + i).val();
var qType = $('#qType' + i).val();
question["Text"] = qText;
question["QTypeId"] = qType;
for (j = 1; j <= anCounter; j++)
{
var answer = {};
var aText = $('#anText' + i.toString() + j.toString()).val();
var aCorrect = "";
if ($('#anCorrect' + i.toString() + j.toString()).prop('checked')) {
aCorrect = "yes";
}
else {
aCorrect = "no";
}
answer["Text"] = aText;
answer["IsCorrect"] = aCorrect;
question.Answers.push(answer);
}
qView.Questions.push(question);
}
$.ajax({
type: "POST",
url: "Save", // the method we are calling
contentType: "application/json",
data: JSON.stringify(qView),
//data: JSON.stringify({ 'qView': qView }),
dataType: "json",
success: function (result) {
alert('Yay! It worked!');
// Or if you are returning something
alert('I returned... ' + result.WhateverIsReturning);
},
error: function (result) {
alert('Oh no :(');
}
});
}
I have no clue what is wrong.
Please any idea where is my issue?

Hi guys so the issue was the way I was calling the the ajax method in the wrong way and some of the properties in the mapping on the client side; I fixed by running the method this way:
function Send()
{
var qCounter = parseInt($('#quesCounter').val());
var listQuestion = [];
for (i = 1; i <= qCounter; i++)
{
var question = {};
var listAnswer = [];
question.Answer = listAnswer; //Second problem was here because I was calling here the array Answers when the List<Answer> property on the server side was called Answer.
var anCounter = parseInt($('#qtCounter' + i).val());
var qText = $('#qtText' + i).val();
var qType = $('#qType' + i).val();
question["Text"] = qText;
question["QTypeId"] = parseInt(qType);// first problem was here because the property on the Server side was integer and I was sending string.
for (j = 1; j <= anCounter; j++)
{
var answer = {};
var aText = $('#anText' + i.toString() + j.toString()).val();
var aCorrect = "";
if ($('#anCorrect' + i.toString() + j.toString()).prop('checked')) {
aCorrect = 1; //third problem was here because true/yes was not recognize so I had to change to 1/0;.
}
else {
aCorrect = 0; //same as above (third problem).
}
answer["Text"] = aText;
answer["IsCorrect"] = aCorrect;
question.Answer.push(answer);
}
listQuestion.push(question);
}
$.ajax({
type: "POST",
url: "Save", // the method we are calling
contentType: "application/json",
data: JSON.stringify(listQuestion),
success: function (result) {
alert('worked');
},
error: function (result) {
alert('Something failed');
}
});
}

You're setting the contentType to application/json and then you stringify your data before sent? You've just contradicted yourself.
You're basically saying: Server, I am sending you a JSON object. But then since you stringify the object, the Server will only see a string. That's why the server wouldn't match the data to your model.
My 2 cents
As long as the JavaScript object / JSON you construct on client-side matches the model you have in the parameter of your controller, you don't need to specify contentType and [FromBody] - to keep things simply. MVC is smart enough to do the binding for you. You don't even need to use lowercase in your C# model for the properties. You can even use true/false for boolean, as long as the matching property in C# model is defined as bool.
Don't use your domain/data model on your view/page. Create a separate model (called view model) and put only what you need to display/use on the view/page there. You don't want to expose what you have in the database to the whole world.
Use camelCase for variables and functions please in JavaScript. The way you declared your function Send(), qView.Questions = and question.Answers.push(answer); just made me crazy :p.
Code Example
$.ajax({
type: 'POST',
// Use HTML helper to generate the link instead of hardcode.
// HTML helper will take care the host, port, and more for you.
url: '#Url.Action("save", "question", new { area = "" })',
// You usually don't need to specify the contentType.
// The default 'application/x-www-form-urlencoded' works well for
// JSON objects.
//contentType: "application/json",
// You don't need to stringify the data
data: { qView: qView },
//data: JSON.stringify({ 'qView': qView }),
dataType: "json",
success: function (result) {
alert('Yay! It worked!');
// Or if you are returning something
alert('I returned... ' + result.WhateverIsReturning);
},
error: function (result) {
alert('Oh no :(');
}
})
// I would use .done() here instead of success and error() but
// this is just personal taste.
;

Populating dropdownlist based on previous selected item asp.net mvc

I am trying to populate a DropDownList based on the previous selected item. To achieve that, I have created three models
Country model:
[Key]
public int CountryId { get; set; }
public string CountryName { get; set; }
public virtual ICollection<State> States { get; set; }
State model:
[Key]
public int StateId { get; set; }
public string StateName { get; set; }
[ForeignKey("Country")]
public int CountryId { get; set; }
public virtual Country Country { get; set; }
public virtual ICollection<City> Citys { get; set; }
City model:
[Key]
public int CityId { get; set; }
public string CityName { get; set; }
[ForeignKey("State")]
public int StateId { get; set; }
public virtual State State { get; set; }
and here is my controller:
private ProjectContext db = new ProjectContext();
//
// GET: /CascadingDropdown/
public ActionResult Index()
{
ViewBag.CountryId = new SelectList(db.Countrys, "CountryId", "CountryName");
return View();
}
public JsonResult StateList(int Id)
{
var state = from s in db.States
where s.CountryId == Id
select s;
return Json(new SelectList(state.ToArray(), "StateId", "StateName"), JsonRequestBehavior.AllowGet);
}
public JsonResult Citylist(int id)
{
var city = from c in db.Citys
where c.StateId == id
select c;
return Json(new SelectList(city.ToArray(), "CityId", "CityName"), JsonRequestBehavior.AllowGet);
}
public IList<State> Getstate(int CountryId)
{
return db.States.Where(m => m.CountryId == CountryId).ToList();
}
[AcceptVerbs(HttpVerbs.Get)]
public JsonResult LoadClassesByCountryId(string CountryName)
{
var stateList = this.Getstate(Convert.ToInt32(CountryName));
var stateData = stateList.Select(m => new SelectListItem()
{
Text = m.StateName,
Value = m.CountryId.ToString(),
});
return Json(stateData, JsonRequestBehavior.AllowGet);
}
And then my script:
$(function () {
$('#Country').change(function () {
$.getJSON('/Cascading/StateList/' + $('#Country').val(), function (data) {
var items = '<option>Select a State</option>';
$.each(data, function (i, state) {
items += "<option value='" + state.Value + "'>" + state.Text + "</option>";
});
$('#State').html(items);
});
});
$('#State').change(function () {
$.getJSON('/Cascading/Citylist/' + $('#State').val(), function (data) {
var items = '<option>Select a City</option>';
$.each(data, function (i, city) {
items += "<option value='" + city.Value + "'>" + city.Text + "</option>";
});
$('#city').html(items);
});
});
});
Finally I display it with this view:
#model Test_restriction.DAL.ProjectContext
#using (Html.BeginForm())
{
#Html.DropDownList("Country", ViewBag.CountryId as SelectList, "Select a Country", new { id="Country" })<br />
<select id="State" name="state"></select><br />
<select id="city" name="City"></select><br />
}
#section js
{
<script src="~/Scripts/Testing.js" type="text/javascript"></script>
}
So I prefer to post all my code to be clear, now problem is that only the first DropDownList with countries is filled the two others DropDownList remain empty. Can someone help to find what is going wrong?
Thank you!

Try This
View
#model Test_restriction.DAL.CountryModel
<script type="text/javscript">
$(function(){
$('#ddlcountry').change(function () {
var sub = $('#ddlstate').val();
if (sub != null && sub != "") {
$('#ddlstate').html(' <option value="">--Select Topic--</option>');
$.ajax({
url: '/Cascading/StateList',
data: { id: sub },
type: 'post',
success: function (data) {
if (data != null && data != "") {
$.each(data, function (i, item) {
$("#ddlstate").append($("<option></option>").val(item.value).html(item.text));
});
}
else {
$('#ddlstate').html(' <option value="">--Select State--</option>');
}
}
});
}
else {
$('#ddlstate').html(' <option value="">--Select State--</option>');
}
});
});
</script>
#Html.DropDownListFor(m => m.subject_id, (SelectList)ViewBag.Countries, "--Select Country--", new { #Class = "form-control", id = "ddlcountry" })
<select id="ddlstate" name="state_id" class="form-control">
<option value="">--Select State--</option>
</select>
Controller
public ActionResult Index()
{
ViewBag.countries = new SelectList(db.Countrys, "CountryId", "CountryName");
return View();
}
public JsonResult StateList(int Id)
{
var state = (from s in db.States
where s.CountryId == Id
select s).ToList();
var list = state.Select(m => new { value = m..StateId, text = m.stateName });
return Json(list, JsonRequestBehavior.AllowGet);
}
Use same method for city dropdown..

Button Click is not calling an Action

When I click the Post button I want to add a message to my database but now it is not working. When I click the button nothing happens and the AddMessage Method in my Home Conroller never gets called. DO you happen to know why?
Chat View:
#{
ViewBag.Title = "Chat";
}
<h2 id="current-chat">General Chat</h2>
<div id="wrapper">
<div id="upper-wrapper">
<div id="available-rooms-dialog">
</div>
<div id="add-delete-room">
<input type="button" onclick="GetRoomName()" id="createroom" value="Create Room" />
<input type="button" onclick="DeleteRoom()" id="deleteroom" value="Delete Room" />
<form id="ava-rooms">
</form>
</div>
<div id="discussion-dialog">
<textarea rows="30" cols="50" id="discussion"></textarea>
</div>
</div>
<div id="message-dialog">
<textarea rows="3" id="message">Type your message</textarea>
<br/>
<input type="button" id="sendmessage" value="Post" />
<input type="hidden" id="displayname" />
</div>
</div>
#section scripts
{
<script src="~/Scripts/jquery.signalR-2.0.2.min.js"></script>
<script type="text/javascript">
var json;
var currentRoomId;
setInterval(LoadRoomMessages(currentRoomId), 6000);
$(function () {
LoadRooms();
// Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call back to display messages.
chat.client.addNewMessageToPage = function (name, message) {
// Add the message to the page.
//===========================================================
//===================THIS LINE DIDNT DO SHIT=================
$.ajax(
{
type: "Get",
url: "#Url.Action("GetCurrentRoomId","Home")",
success: function (data) {
currentRoomId = data;
}
});
//==========================================================
//TODO: Add Record to Server
$.ajax(
{
type: "Post",
url: "#Url.Action("AddMessage", "Home")",
data: { messageCont: message.toString() },
success: function (data) {
LoadRoomMessages(currentRoomId);
}
});
};
//$('#sendmessage').click(AddMessage());
// Get the user name and store it to prepend to messages.
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
#*function AddMessage() {
$.ajax(
{
type: "Post",
url: "#Url.Action("AddMessage", "Home")",
data: { messageCont: message.toString() },
success: function (data) {
for (var i = 0; i < data.length; i++) {
//access with data[i].modelattribute
LoadRoomMessages(currentRoomId);
}
}
});
}*#
// This optional function html-encodes messages for display in the page.
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
function GetRoomName() {
var newRoomName = prompt('Enter a new Room Name', 'Name');
$.ajax(
{
type: "Post",
url: "#Url.Action("AddRoom", "Home")",
data: { chatRoom: newRoomName },
success: function (data) {
for (var i = 0; i < data.length; i++) {
//access with data[i].modelattribute
}
$('#ava-rooms').empty();
LoadRooms();
}
});
}
function DeleteRoom() {
var roomname = prompt('Enter a Room Name to be Deleted', 'Room Name');
$.ajax(
{
type: "Post",
url: "#Url.Action("DeleteRoom", "Home")",
data: { chatRoom: roomname },
success: function (data) {
for (var i = 0; i < data.length; i++) {
//access with data[i].modelattribute
}
$('#ava-rooms').empty();
LoadRooms();
}
});
}
function LoadRooms() {
$.ajax(
{
type: "Get",
url: "#Url.Action("GetRooms", "Home")",
success: function (data) {
json = data;
var obj = JSON.parse(json);
GetUserPicture();
for (var i = 0; i < data.length; i++) {
//access with data[i].modelattribute
// Add an Onlick event to this statment that calls LoadRoomMessages
//onclick="GetRoomName()"
$('#ava-rooms').append("<input type=\"button\" " + "onclick=LoadRoomMessages(" + obj[i].Id + ") " + "id=\"" + obj[i].RoomName + "\"" + "value=\"" + obj[i].RoomName + "\" />");
}
}
});
}
function GetUserPicture() {
$.ajax(
{
type: "Get",
url: "#Url.Action("GetUserPicture", "Home")",
success: function (data) {
$('.body-content').css("background-image", "url(\"" + data + "\")");
}
});
}
function LoadRoomMessages(id) {
$.ajax(
{
type: "Get",
url: "#Url.Action("GetMessages", "Home")",
data: { roomId: id },
success: function (data) {
$('#discussion').empty();
json = data;
var obj = JSON.parse(json);
for (var i = 0; i < data.length; i++) {
$('#discussion').append(htmlEncode(obj[i].Author) + " : " + htmlEncode(obj[i].Message) + "\r\n");
}
}
});
}
</script>
}
Home Controller:
using System;
using System.Linq;
using System.Net.NetworkInformation;
using System.Web.Mvc;
using System.Web.Script.Serialization;
using SignalRChat.Models;
namespace SignalRChat.Controllers
{
public class HomeController : Controller
{
ChatDBEntities DB = new ChatDBEntities();
ChatDBEntities1 DB_Uno = new ChatDBEntities1();
ChatDBEntities2 DB_Dos = new ChatDBEntities2();
public ActionResult Chat()
{
return View();
}
public ActionResult Users()
{
return View();
}
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
[HttpGet]
public string GetUserPicture()
{
try
{
var authorId = (int)Session["currentUserId"];
var pic = DB_Dos.ChatRoomUsers.Find(authorId).PictureURL;
if (String.IsNullOrWhiteSpace(pic))
return "http://www.adventuredogblog.com/wp-content/uploads/2014/03/3.jpg";
else
{
return pic;
}
}
catch (Exception)
{
return "http://www.adventuredogblog.com/wp-content/uploads/2014/03/3.jpg";
}
}
[HttpPost]
public bool AddMessage(string messageCont)
{
var authorId = (int) Session["currentUserId"];
var message = new ChatMessage();
message.Author = DB_Dos.ChatRoomUsers.Find(authorId).UserName; // Add Code to get the actual user
message.AuthorId = authorId; ; //Add Code to get current user Id
message.Message = messageCont;
message.MessageDate = DateTime.UtcNow;
message.RoomId = (int)Session["currentRoomId"]; ; //Add Room Code
message.RoomName = DB_Uno.ChatRooms.Find(message.RoomId).RoomName; // Get actual name based on id
try
{
DB.ChatMessages.Add(message);
DB.SaveChanges();
return true;
}
catch (Exception)
{
return false;
}
}
[HttpGet]
public int GetCurrentRoomId()
{
return (int) Session["currentRoomId"];
}
[HttpGet]
public string GetMessages(int roomId)
{
Session["currentRoomId"] = roomId;
var messages = (from message in DB.ChatMessages where message.RoomId == roomId orderby message.MessageDate ascending select message).ToList();
var serializer = new JavaScriptSerializer();
string json = serializer.Serialize(messages);
return json;
}
[HttpPost]
public bool AddRoom(string chatRoom)
{
var room = new ChatRoom();
room.IsActiveRoom = true;
room.RoomName = chatRoom;
room.isDefaultRoom = false;
room.UserCount = 1;
room.Id = -1;
try
{
DB_Uno.ChatRooms.Add(room);
DB_Uno.SaveChanges();
return true;
}
catch (Exception)
{
return false;
}
}
[HttpPost]
public bool DeleteRoom(string chatRoom)
{
var userId = (from u in DB_Uno.ChatRooms where u.RoomName == chatRoom select u.Id).ToList()[0];
var room = DB_Uno.ChatRooms.Find(userId);
var messages = (from u in DB.ChatMessages where u.RoomId == room.Id select u).ToList();
try
{
foreach (var message in messages)
{
DB.ChatMessages.Remove(message);
}
DB.SaveChanges();
DB_Uno.ChatRooms.Remove(room);
DB_Uno.SaveChanges();
return true;
}
catch (Exception)
{
return false;
}
}
[HttpGet]
public string GetRooms()
{
var rooms = DB_Uno.ChatRooms;
var serializer = new JavaScriptSerializer();
string json = serializer.Serialize(rooms);
return json;
}
public ActionResult AddUser()
{
return View();
}
[HttpPost]
public ActionResult AddUser(ChatRoomUser user)
{
var users = DB_Dos.ChatRoomUsers;
try
{
user.LastActivity = DateTime.UtcNow;
user.RoomId = 1;
user.RoomName = "General Chat";
users.Add(user);
DB_Dos.SaveChanges();
Session["currentUserId"] = user.UserId;
return View("Chat");
}
catch(Exception)
{
return View();
}
}
public ActionResult Login()
{
return View();
}
[HttpPost]
public ActionResult Login(ChatRoomUser LUser)
{
var userId = (from u in DB_Dos.ChatRoomUsers where u.UserName == LUser.UserName select u.UserId).ToList();
var user = DB_Dos.ChatRoomUsers.Find(userId[0]);
if(user.password == LUser.password)
{
user.LastActivity = DateTime.UtcNow;
Session["currentRoomId"] = user.RoomId;
Session["currentUserId"] = user.UserId;
DB_Dos.SaveChanges();
return View("Chat");
}
else
{
return View();
}
}
}
}

You need to use form action attribute to point it to your controller or use i.e.Html.BeginForm and put your buttons inside the form