MVC-Pass Model data from View to Controller using Ajax

Question

Hi All,

 

I want to pass the model from view to controller using Ajax

But I am getting null paramter value. Iam not able to understand where iam wrong.

//Model Class
public class CNModel
{
public CNModel()
{
}
public string ID { get; set; }
public string Name { get; set; }
}
//csHTML
@model CN_MVC.Models.CNModel
@using Newtonsoft.Json
@using (Html.BeginForm(new { @id = "CNform" }))
{
<label>ID</label>
@Html.TextBoxFor(m => m.ID, new { @class = "form-control", id = "txtID", placeholder = "Enter ID"})
<label>Name</label>
@Html.TextBoxFor(m => m.Name new { @class = "form-control", id = "txtName", placeholder = "Enter Name"})
<input type="button" id="btnShow" class="btn" value="Pass To Controller" onclick="Show()" />
}
<script type="text/javascript">
function Show() {
debugger;
//var data = @Html.Raw(JsonConvert.SerializeObject(Model));
var data = '@Html.Raw(Json.Encode(Model))';
$.ajax({
type: 'POST',
// dataType: 'html', // this can be omitted - the ajax() function will work it out
cache: false,
url: '/CN/Show',
data: data,
success: function (data, textStatus, jqXHR) {
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
}
</script>
//Controller
[HttpPost]
[AcceptVerbs(HttpVerbs.Post)]
public string Show(string modelParameter)
{
var DeserializedModel = JsonConvert.DeserializeObject<RCNModel>(modelParameter);
}

Answer 1

function Show() {

var data = $('#CNform').serialize();

console.log(data);

$.ajax({

type: 'POST',

cache: false,

url: '/CN/Show',

data: data,

success: function (data, textStatus, jqXHR) {

},

error: function (jqXHR, textStatus, errorThrown) {

}

});

}

 

 

And change the type of parameter

//Controller

[HttpPost]

[AcceptVerbs(HttpVerbs.Post)]

public string Show(CNModel modelParameter)

{

// Code

}

Answer 2

Thanks @Gaurav Raut

Answer 3

Thanx a lot Gaurav.

 

Issue has been resolved .

 

Also one thing i have modified in the cshtml file is:

 

@using (Html.BeginForm(null, null, new { @id = string.Empty }, FormMethod.Post,
new { @id = "CNform" })