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);
}