Develop Reference

How to call asp.net mvc form submit event which use ajax after button click and validate?

I'm developing an application with asp.net mvc. I am not doing a screen for preparing questions for surveys and answers to these questions. On the home screen is a table of questions. When I press 'add new question' button, I open a popup with jquery and add the question and answer options in this question ('popup is independent of the main screen, ie Layout = null'). Then, when the 'submit' button of this popup is pressed, I validate the form in the popup with javascrit in addOrEdit.cshtml. If the validation is successful, my goal is to submit the form submit event of asp.net mvc to the javascript function on the main page. I can't do this. Where am I making a mistake. What is the problem. I tried to explain it in an explanatory way. I also added screenshots and codes.
Index.cshtml
#{
ViewBag.Title = "Soru Listesi";
}
<h2>Add Question</h2>
<a class="btn btn-success" style="margin-bottom: 10px" onclick="PopupForm('#Url.Action("AddOrEdit","Question")')"><i class="fa fa-plus"></i> Add New Question</a>
//table heree
Index.cshtml sectionscript
#section Scripts{
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
//datatable script hereee.....
function PopupForm(url) {
var formDiv = $('<div/>');
$.get(url)
.done(function (response) {
formDiv.html(response);
Popup = formDiv.dialog({
autoOpen: true,
resizable: true,
title: 'Soru Detay',
modal: true,
height: 'auto',
width: '700',
close: function () {
Popup.dialog('destroy').remove();
}
});
});
}
function SubmitForm(form) {
alert('gel babanaaa');
if ($(form).valid()) {
alert('validd');
$.ajax({
type: "POST",
url: form.action,
data: $(form).serialize(),
success: function (data) {
if (data.success) {
Popup.dialog('close');
dataTable.ajax.reload();
$.notify(data.message,
{
globalPosition: "top center",
className: "success",
showAnimation: "slideDown",
showDuration: 500,
gap: 1000
});
}
}
});
}
}
</script>
}
AddOrEdit.cshtml
#model MerinosSurvey.Models.Questions
#{
Layout = null;
}
#using (Html.BeginForm("AddOrEdit", "Question", FormMethod.Post, new { #class = "needs-validation", novalidate = "true", onsubmit = "return SubmitForm(this)", onreset = "return ResetForm(this)", id = "questionForm" }))
{
// other component heree
<div class="form-group row">
<input type="button" value="Submit" class="btn btn-primary" id="btnSubmit" />
<input type="reset" value="Reset" class="btn btn-secondary" />
</div>
}
AddOrEdit.cshtml scripts
<script>
//some scriptt for validationn...
$("#btnSubmit").click(function (event) {
var form = $("#questionForm");
if (form[0].checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.addClass('was-validated');
// Perform ajax submit here...
if ($(form).valid()) {
form[0].submitEvent();//MY PROBLEM!!!!!
}
});
</script>
I want to call SubmitForm event in asp.net mvc after button click and validation. And I used form[0].submitEvent(); SO I can't send a request via AJAX. but I doesn't work.

replaces your Index.cshtml with the code below
#{
ViewBag.Title = "Soru Listesi";
}
<h2>Add Question</h2>
<a class="btn btn-success" style="margin-bottom: 10px" onclick="PopupForm('#Url.Action("AddOrEdit","Question")')"><i class="fa fa-plus"></i> Add New Question</a>
<table id="questionTable" class="table table-striped table-bordered accent-blue" style="width: 100%">
<thead>
<tr>
<th>Soru No</th>
<th>Soru Adı</th>
<th>Oluşturma Tarihi</th>
<th>Güncelleme Tarihi</th>
<th>Detay/Güncelle/Sil</th>
</tr>
</thead>
</table>
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
#section Scripts{
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
var Popup, dataTable;
$(document).ready(function () {
dataTable = $("#questionTable").DataTable({
"ajax": {
"url": "/Question/GetData",
"type": "GET",
"datatype": "json"
},
"columnDefs": [
{ width: '10%', targets: 5 }
],
"scrollX": true,
"scrollY": "auto",
"columns": [
{ "data": "QuestionId" },
{ "data": "QuestionName" },
{
"data": "CreatedDate",
"render": function (data) { return getDateString(data); }
},
{
"data": "UpdatedDate",
"render": function (data) { return getDateString(data); }
},
{
"data": "QuestionId",
"render": function (data) {
return "<a class='btn btn-primary btn-sm' onclick=PopupForm('#Url.Action("AddOrEdit", "Question")/" +
data +
"')><i class='fa fa-pencil'></i> Güncelle</a><a class='btn btn-danger btn-sm' style='margin-left:5px' onclick=Delete(" +
data +
")><i class='fa fa-trash'></i> Sil</a>";
},
"orderable": false,
"searchable": false,
"width": "150px"
}
],
"language": {
"emptyTable":
"Soru bulunamadı, lütfen <b>Yeni Soru Oluştur</b> butonuna tıklayarak yeni anket oluşturunuz. "
}
});
});
function getDateString(date) {
var dateObj = new Date(parseInt(date.substr(6)));
let year = dateObj.getFullYear();
let month = (1 + dateObj.getMonth()).toString().padStart(2, '0');
let day = dateObj.getDate().toString().padStart(2, '0');
return day + '/' + month + '/' + year;
};
function PopupForm(url) {
var formDiv = $('<div/>');
$.get(url)
.done(function (response) {
formDiv.html(response);
Popup = formDiv.dialog({
autoOpen: true,
resizable: true,
title: 'Soru Detay',
modal: true,
height: 'auto',
width: '700',
close: function () {
Popup.dialog('destroy').remove();
}
});
});
}
function SubmitForm(form) {
alert('Submit Formm');
if (form[0].checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.addClass('was-validated');
if ($(form).valid()) {
alert('ben burdyaım');
}
}
function ResetForm(form) {
Popup.dialog('close');
return false;
}
function Delete(id) {
if (confirm('Bu soruyu silmek istediğinizden emin misiniz?')) {
$.ajax({
type: "POST",
url: '#Url.Action("Delete", "Question")/' + id,
success: function (data) {
if (data.success) {
dataTable.ajax.reload();
$.notify(data.message,
{
className: "success",
globalPosition: "top center",
title: "BAŞARILI"
})
}
}
});
}
}
</script>
}
replaces your AddOrEdit.cshtml with the code below
#model MerinosSurvey.Models.Questions
#{
Layout = null;
}
#using (Html.BeginForm("AddOrEdit", "Question", FormMethod.Post, new { #class = "needs-validation", novalidate = "true", onsubmit = "return SubmitForm(this)", onreset = "return ResetForm(this)", id = "questionForm" }))
{
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group row">
#Html.LabelFor(model => model.QuestionId, new { #class = "col-form-label col-md-3" })
<div class="col-md-9">
#Html.TextBoxFor(model => model.QuestionId, new { #readonly = "readonly", #class = "form-control" })
</div>
</div>
<div class="form-group row">
#Html.LabelFor(model => model.QuestionName, new { #class = "col-form-label col-md-3" })
<div class="col-md-9">
#Html.EditorFor(model => model.QuestionName, new { htmlAttributes = new { #class = "form-control", required = "true" } })
<div class="valid-feedback"><i class="fa fa-check">Süpersin</i></div>
<div class="invalid-feedback "><i class="fa fa-times"></i></div>
</div>
</div>
<div class="form-group row">
#Html.LabelFor(model => model.CreatedDate, new { #class = "form-control-label col-md-3"})
<div class="col-md-9">
#Html.EditorFor(model => model.CreatedDate, "{0:yyyy-MM-dd}", new { htmlAttributes = new { #class = "form-control", type = "date", #readonly = "readonly",required="false" } })
</div>
</div>
<div class="form-group row ">
<label class="col-sm-3 col-form-label">Options</label>
<div class="col-sm-9 input-group">
<input type="text" class="form-control" name="option[]" required placeholder="Seçenek giriniz" />
<div class="input-group-append">
<button type="button" class="btn btn-success addButton"><i class="fa fa-plus"></i></button>
</div>
</div>
</div>
<!-- The option field template containing an option field and a Remove button -->
<div class="form-group d-none row" id="optionTemplate">
<div class="offset-sm-3 col-sm-9 input-group">
<input class="form-control" type="text" name="option[]" required placeholder="Diğer seçenek giriniz." />
<div class="input-group-append">
<button type="button" class="btn btn-danger removeButton"><i class="fa fa-times"></i></button>
</div>
</div>
</div>
<div class="form-group row">
<input type="button" value="Submit" class="btn btn-primary" id="btnSubmit" />
<input type="reset" value="Reset" class="btn btn-secondary" />
</div>
}
<script>
$(document).ready(function () {
// The maximum number of options
var MAX_OPTIONS = 5;
$('#questionForm').on('click', '.addButton', function () {
var $template = $('#optionTemplate'),
$clone = $template
.clone()
.removeClass('d-none')
.removeAttr('id')
.insertBefore($template),
$option = $clone.find('[name="option[]"]');
// Add new field
$('#questionForm').bootstrapValidator('addField', $option);
})
// Remove button click handler
.on('click', '.removeButton', function () {
var $row = $(this).parents('.form-group'),
$option = $row.find('[name="option[]"]');
// Remove element containing the option
$row.remove();
// Remove field
$('#questionForm').bootstrapValidator('removeField', $option);
})
// Called after adding new field
.on('added.field.bv', function (e, data) {
// data.field --> The field name
// data.element --> The new field element
// data.options --> The new field options
if (data.field === 'option[]') {
if ($('#questionForm').find(':visible[name="option[]"]').length >= MAX_OPTIONS) {
$('#questionForm').find('.addButton').attr('disabled', 'disabled');
}
}
})
// Called after removing the field
.on('removed.field.bv', function (e, data) {
if (data.field === 'option[]') {
if ($('#questionForm').find(':visible[name="option[]"]').length < MAX_OPTIONS) {
$('#questionForm').find('.addButton').removeAttr('disabled');
}
}
});
});
$("#btnSubmit").click(function (event) {
var form = $("#questionForm");
if (form[0].checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.addClass('was-validated');
SubmitForm(form);
});
</script>

Show the details of a particular column in bootstrap modal

I am having a jquery data table in which there is a description field, I want to limit the words to 30 and add a show more link. when the user clicks on the show more the comment of that particular id will open in the bootstrap modal. Till now I am able to do this much, but the comment is not coming in the bootstrap modal.
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", ".opencomment", function () {
var mycomment = $(this).data('FeedbackID');
$(".modal-body #commentdesc").val(mycomment);
});
$('#FeedbackDetails').DataTable({
"processing": true,
"ajax": {
"url": "/ViewFeedback/LoadData",
"type": "GET",
"datatype": "json"
},
"lengthMenu": [
[5, 10, 25, 50, 100, -1],
[5, 10, 25, 50, 100, "All"]
],
"autoWidth": true,
"responsive": true,
"lengthChange": true,
"ordering": true,
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
var oSettings = this.fnSettings();
$("td:first", nRow).html(oSettings._iDisplayStart+iDisplayIndex +1);
return nRow;
},
"columns": [
{ "data": null, "autoWidth": true },
{ "data": "FeedbackUserName", "name": "User Name", "autoWidth": true },
{ "data": "FeedBackUserEmailID", "name": "Email ID", "autoWidth": true },
{ "data": "FeedBackComment", "name": "Comment", "autoWidth": true },
{ "data": "Designation", "name": "Designation", "autoWidth": true },
{ "data": "Organization", "name": "Organization", "autoWidth": true },
{ "data": "ContactNo", "name": "Contact No", "autoWidth": true },
{ "data": "City", "name": "City", "autoWidth": true },
{
"data": "FeedBackDate", "name": "Feedback Date", "autoWidth": true,
'render': function (jsonDate) {
var date = new Date(parseInt(jsonDate.substr(6)));
var month = date.getMonth();
return date.getDate() + "/" + month + "/" + date.getFullYear();
}
},
],
columnDefs: [{
targets: 3,
data:"FeedbackID",
render: function (data, type, row, meta) {
if (type === 'display' && data.length > 40) {
return '<span title="' + data + '">' + data.substr(0, 38) + '...Show More';
}
else {
return data;
}
}
}],
"language": {
"emptyTable": "No Events Found Related To This User"
}
});
});
</script>
<div class="container" style="margin-top:10px">
<table id="FeedbackDetails" class="ui celled table">
<thead>
<tr>
<th>S.No</th>
<th>User Name</th>
<th>Email ID</th>
<th>Comment</th>
<th>Designation</th>
<th>Organization</th>
<th>Contact No</th>
<th>City</th>
<th>Feedback Date</th>
</tr>
</thead>
</table>
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Feedback Comment</h4>
</div>
<div class="modal-body">
<p id="commentdesc"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
public ActionResult LoadData()
{
using (DHIFeedbackEntities2 Ms = new DHIFeedbackEntities2())
{
var feedbacklist = Ms.FeedBacks.ToList<FeedBack>();
return Json(new { data = feedbacklist }, JsonRequestBehavior.AllowGet);
}
}

I cannot find the comment div in your modal with id #commentdesc.
So change your modal HTML to:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Feedback Comment</h4>
</div>
<div class="modal-body">
<p id="commentdesc"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Then show the modal when the link is clicked. Also to get your comment change to $(this).data('id'); and
since you are using paragraph tag set its html and not val properties
$(document).on("click", ".opencomment", function () {
var mycomment = $(this).data('id');
$(".modal-body #commentdesc").html(mycomment);
$('#myModal').modal('show');
});
Also if your jquery selector is by ID, there is no need to search it within a class: $(".modal-body #commentdesc").val(mycomment); change that to $("#commentdesc").val(mycomment);

Data is not getting posted from $.ajax to .Net core asp.net mvc method

Here is my server side method (which is getting data through postman)
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public HttpStatusCode RegisterNewUser(UserModel user)
{
return HttpStatusCode.OK;
}
}
Here is .jsx Code of javascript :
$.ajax({
url: "Home/RegisterNewUser",
type: "POST",
data: JSON.stringify(this.state),
dataType: "json",
contentType: "application/json",
success: function (status) {
console.log(status);
if (status == '200') {
alert('You are registered now !!');
this.setState({ Email: '', FirstName: '', LastName: '', LastNamePrefix: '', AcceptTerms: false, CompanyName: '' });
}
else {
alert(' you are not registered !!');
}
$('#forgetEmailId').val('');
$('#divGetPass').css('display', 'none');
$('#getPass').val('Send My Password on Email');
},
error: function () {
alert('Some error occured !!');
}
});
THis javascript code is hitting the debug pointer inside my server side method but the Model is not getting populated , while If I am hitting it using Postman then the Model is populated.
Here is full react code
var RegistrationBox = React.createClass({
getInitialState: function () {
return {Email:'', FirstName: '', LastName: '',LastNamePrefix:'',AcceptTerms:false,CompanyName:'' };
},
handleEmailChange: function (e) {
this.setState({Email: e.target.value });
},
handleFirstNameChange: function (e) {
this.setState({ FirstName: e.target.value });
},
handleLastNamePrefixChange: function (e) {
this.setState({ LastNamePrefix: e.target.value });
},
handleLastNameChange: function (e) {
this.setState({ LastName: e.target.value });
},
handleCompanyNameChange: function (e) {
this.setState({ CompanyName: e.target.value });
},
handleAcceptChange: function (e) {
this.setState({ AcceptTerms: e.target.checked });
},
toggleIsChecked: function () {
this.setState({ AcceptTerms: !this.state.checked });
},
handleReset: function (e) {
this.setState({ Email:'', FirstName: '', LastName: '', LastNamePrefix: '', AcceptTerms: false, CompanyName: '' });
},
handleSubmit: function (e) {
e.preventDefault();
var email = this.state.Email.trim();
var fName = this.state.FirstName.trim();
var lName = this.state.LastName.trim();
var lNamePrefix = this.state.LastNamePrefix.trim();
var cName = this.state.CompanyName.trim();
var aTerms = this.state.AcceptTerms;
if (email == null || fName == null || lName == null ||
lNamePrefix == null || cName == null || aTerms == null) {
return;
}
if (aTerms == false){
alert('Please accept Terms');
return;
}
else //Make Ajax Call
{
$.ajax({
url: "Home/RegisterNewUser",
type: "POST",
data: JSON.stringify(this.state),
dataType: "json",
contentType: "application/json",
success: function (status) {
console.log(status);
if (status == '200') {
alert('You are registered now !!');
this.setState({ Email: '', FirstName: '', LastName: '', LastNamePrefix: '', AcceptTerms: false, CompanyName: '' });
}
else {
alert(' you are not registered !!');
}
$('#forgetEmailId').val('');
$('#divGetPass').css('display', 'none');
$('#getPass').val('Send My Password on Email');
},
error: function () {
alert('Some error occured !!');
}
});
}
},
render: function () {
var chkBoxStyle = {
width: 25,
height: 25,
};
var chkboxlabel = {
margin: 8
};
return (
<div className="registrationBox">
<form method="post" id="user-registration-form" data-parsley-validate className="form-horizontal form-label-left">
<div className="form-group">
<label className="control-label col-md-3 col-sm-3 col-xs-12">
Email <span className="required">*</span>
</label>
<div className="col-md-6 col-sm-6 col-xs-12">
<input onChange={this.handleEmailChange} value={this.state.Email} type="text" id="email" required="required" className="form-control col-md-7 col-xs-12" />
</div>
</div>
<div className="form-group">
<label className="control-label col-md-3 col-sm-3 col-xs-12">
First Name <span className="required">*</span>
</label>
<div className="col-md-6 col-sm-6 col-xs-12">
<input onChange={this.handleFirstNameChange} value={this.state.FirstName} type="text" id="first-name" required="required" className="form-control col-md-7 col-xs-12" />
</div>
</div>
<div className="form-group">
<label className="control-label col-md-3 col-sm-3 col-xs-12">
Last Name Prefix<span className="required">*</span>
</label>
<div className="col-md-6 col-sm-6 col-xs-12">
<input onChange={this.handleLastNamePrefixChange} value={this.state.LastNamePrefix} type="text" id="last-name-prefix" name="last-name-prefix" required="required" className="form-control col-md-7 col-xs-12" />
</div>
</div>
<div className="form-group">
<label className="control-label col-md-3 col-sm-3 col-xs-12">
Last Name <span className="required">*</span>
</label>
<div className="col-md-6 col-sm-6 col-xs-12">
<input onChange={this.handleLastNameChange} value={this.state.LastName} type="text" id="last-name" name="last-name" required="required" className="form-control col-md-7 col-xs-12" />
</div>
</div>
<div className="form-group">
<label
style={chkboxlabel}
className="control-label col-md-3 col-sm-3 col-xs-12">
Accept Terms & Conditions
<span className="required">*</span>
</label>
<div className="checkbox col-md-6 col-sm-6 col-xs-12">
<div style={{ float: 'left', width: 60, paddingLeft: 5 }}>
<input onChange={this.handleAcceptChange} checked={this.state.AcceptTerms} type="checkbox" id="accept"
name="accept" required="required" style={chkBoxStyle} />
</div>
</div>
</div>
<div className="form-group">
<label className="control-label col-md-3 col-sm-3 col-xs-12">
Company Name <span className="required">*</span>
</label>
<div className="col-md-6 col-sm-6 col-xs-12">
<input onChange={this.handleCompanyNameChange} value={this.state.CompanyName} type="text" id="company-name" name="compnay-name" required="required" className="form-control col-md-7 col-xs-12" />
</div>
</div>
<div className="form-group">
<div className="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button className="btn btn-primary" type="button">Cancel</button>
<button onClick={this.handleReset} className="btn btn-primary" type="reset">Reset</button>
<button onClick={this.handleSubmit} type="button" className="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
);
}
});
ReactDOM.render(
<RegistrationBox />,
document.getElementById('registration-div')
);
this line
JSON.stringify(this.state)
is giving everything as expected.
Looks like I missed something really small but important.. :(
User Model
**
public class UserModel
{
public string Email { get; set; }
public string FirstName { get; set; }
public string LastNamePrefix { get; set; }
public string LastName { get; set; }
public bool AcceptTerms { get; set; }
public string CompanyName { get; set; }
}
**
while using Postman such POST request is working fine with same serverside code

asp.net mvc modal popup with datatable

How to Display a Datatable in Modal Popup with out using partial view.
hear is the my indax.cshtml
<button type="button" class="btn btn-info btn-infolink btn-BranchNetwork">Branch Network</button>
<div class="modal fade" id="itemModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel"> Branch Network</h4>
</div>
<div class="modal-body no-padding">
<div style="width:100%; margin:0 auto;">
<table id="branchTable">
<thead>
<tr>
<th>BranchName</th>
<th>Address</th>
<th>Manager Name</th>
<th>Mobile</th>
<th>Telephone</th>
<th>fax</th>
</tr>
</thead>
</table>
</div>
<style>
tr.even {
background-color: #F5F5F5 !important;
}
</style>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
hear i'm using /Branch/GetBranchNetwork for getting Data.
#section Scripts{
<script>
$(document).ready(function () {
$('#branchTable').DataTable({
"processing": true, // for show progress bar
"ajax": {
cache: false,
url: "/Branch/GetBranchNetwork",
type: "POST",
datatype: "json",
},
"columns": [
{ "data": "branchName", "width": "5%", },
{ "data": "address"},
{ "data": "managerName"},
{ "data": "mobile"},
{ "data": "telephone"},
{ "data": "fax"},
]
});
});
</script>
}
popup Modal section
<script>
$('.btn-BranchNetwork').on('click', function () {
var url = '/Branch/BranchNetwork';
$.get(url, function (data) {
//debugger;
$('#ItemModelContent').html(data);
$('#itemModel').modal('show');
});
});
Method
[HttpPost]
public ActionResult GetBranchNetwork()
{
WebPortalEntities db = new WebPortalEntities();
var jsonData = new
{
data = from a in db.tbl_branchNetwork.ToList() select a
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
public ActionResult BranchNetwork()
{
return PartialView("_BranchNetwork");
}
_BranchNetwork.cshtml is my Partial view and no content there.
i want to without calling partial view.load data to modal dialog

So... just put the Modal on the parent page with the table defined in it. No need for modal. BUT the table will populate when the parent page populates.
change your button html to
<button type="button" class="btn btn-info btn-infolink btn-BranchNetwork"
data-toggle="modal" data-target="#itemModel">Branch Network</button>

How to pass parameter via ajax mvc?

I have a problem as follow : click button delete , then show modal popup , in modal, i have one button is "OK", when i click button "OK" , process event click of button "OK", such as call action delete via ajax.
my code snippet.
#foreach (var item in Model)
{
<tr>
<td>
#Ajax.ActionLink(" Delete", "", "", new { id = #item.UserProfileID }, new AjaxOptions()
{
HttpMethod = "GET",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "",
OnSuccess = "ShowModal()"
}, new { #class = "fa fa-times btn btn-danger btn-xs", #id = "bt_del_profile" })
</td>
</tr>
}
<div id="myModal" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-footer">
<button type="button" id="bt_del_ok" class="btn btn-success btn-sm">Ok</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function ShowModal() {
$("#myModal").modal('show');
}
$('#bt_del_ok').click(function (e) {
e.preventDefault();
$.ajax({
url: '/Profile/DelProfile',
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
cache: false,
//processData: false,
data: { id: #item.UserProfileID },
success: function (result) {
alert("OK");
},
error: function (result) {
alert("Error delete");
}
});
});
</script>
The problem in here data: { id: #item.UserProfileID }, . I can not get ID in here although when i show devtool chrome , i see <a class="fa fa-times btn btn-danger btn-xs" data-ajax="true" data-ajax-method="GET" data-ajax-success="ShowModal()" href="/Home/Index/P000000002" id="bt_del_profile"> Delete</a>
Can you tell me about this? and give me some advices.
Thank you.

Even though you are using #item.UserProfileID within your java script, it's actually asp.net. If you had this value coming from javascript, you would use it like data: { id: '12345' },
Which means your code should be data: { id: '#item.UserProfileID' }. That should fix your problem.
Some 'Ideas'
You can change your show modal like this.
<div aria-hidden="true" class="modal fade myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-footer">
<button type="button" id="bt_del_ok" class="btn btn-success btn-sm">Ok</button>
</div>
</div>
</div>
Then change your ShowModal like below.
function ShowModal(userProfileId) {
$(".myModal").prop('id', userProfileId);
$(".myModal").modal('show');
}
Then in delete event;
var userProfileId = $(".myModal").prop('id');
data: { id:userProfileId },