I'm attempting to render a partial view in a Div within the carousel i have created on the home page. The partial view is from a different controller the view code is as seen below. The partial view contains a table which i want to be shown within the carousel div. Currently nothing is being loaded into the div with the code i'm using, i'm not sure what i'm doing wrong. You help would be much appreciated.
Home Index View
#{
ViewBag.Title = "Home Page";
}
<div id="mycarousel" class="carousel slide" data-ride="carousel" style="margin-top: 30px">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></li>
<li data-target="#mycarousel" data-slide-to="1" class="active"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="dvgetpvt">
</div>
</div>
<div class="item">
<p>
NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.
</p>
</div>
</div>
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Within the view code i have the following to get the partial view.
<script type="text/javascript">
$.ajax({
url: "/crmPVT/GetPVT",
contentType: "application/html; charset=utf-8",
type: "GET",
dataType: "html"
})
.success(function (result) {
$('#dvgetpvt').html(result);
})
.error(function (xhr, status) {
alert(status);
})
</script>
The crmPVT controller contains the following code for the partial view
crmPVT Controller
public PartialViewResult GetPVT()
{
var all = (from e in db.crmPVT
where e.Report_ID == 1
select e);
var commnorth = (from e in db.crmPVT
where e.Report_ID == 1 &&
e.Team.Contains("Commercial North")
select e);
var team = User.Identity.Name == "*****" ? commnorth : all;
return PartialView(team);
}
Related
What am I doing wrong?
I want to pass Id to the controller where I can use it.
My controller
[HttpGet]
public ActionResult ListCoach(int id)
{
List<Training> ListCoachTraining = _TraningService.ListCoach(id);
var ChoachList = _TraningService.Coach(id);
return View(ChoachList);
}
My view - what is correct way call the script? It doesn't work right now:
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="~/Content/no_foto.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">#item.Name</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div id="textButton">
Go to anywhere
<a id="btnSave" class="btn btn-primary">Go to anywhere</a>
<input class="btn btn-primary" type="button" id="btnSave" value="Save" />
</div>
</div>
</div>
</div>
}
</div>
</div>
//call the script
<script src="#Url.Content("~/scripts/ManagerAccount.js")" type="text/javascript"></script>
My script - I use Ajax for it. There I want to pass id to the controller:
function PassToContoller(data) {
$("#btnSave").click(function () {
$.ajax({
type: "Get",
url: '/TrainingType/ListCoach',
data: { id: data },
success: function (data) {
window.location.href = '/appUser/ManageAccount';
//return data;
},
error: function () {
$("#loader").fadeOut("slow");
console.log("error1");
}
});
});
};
You haven't call the function accordingly. You are expecting your PassToContoller function should invoke while you click on save in your case either you have to call this function with btnSave onlick or onClick="PassToContoller(#item.Name)"
I am showing you both here:
When onClick="PassToContoller(#item.Name)" In Line:
Razor HTML
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4">
<div class="card" style="width: 18rem;">
#*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*#
<div class="card-body">
<h5 class="card-title">#item.Name</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div id="textButton">
Go to anywhere
<a id="btnSave" class="btn btn-primary">Go to anywhere</a>
<input class="btn btn-primary" type="button" id="btnSave" onClick="PassToContoller(#item.Name)" value="Save" />
</div>
</div>
</div>
</div>
}
</div>
</div>
Script:
<script>
function PassToContoller(data) {
alert(data);
$.ajax({
type: "GET",
url: '/ListCoachController/ListCoach',
data: { id: data },
success: function (data) {
console.log(data);
window.location.href = '/appUser/ManageAccount';
return data;
},
error: function () {
$("#loader").fadeOut("slow");
console.log("error1");
}
});
}
</script>
Output:
Aother way btnSave Onlick:
In this you need few modifications:
Need to introduce a input type text which will be hidden it will
contrain a value like this <input type="text" id="getValue" value="#item.Name" hidden /> and will pass that hidden value when you
would click the button.
Another thing is your btnSave seems you have used same for other button as well so your onclick function will getConfused which event to fired. So need to set unique btn id Now rest of the same like below:
Razor HTML
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4">
<div class="card" style="width: 18rem;">
#*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*#
<div class="card-body">
<h5 class="card-title">#item.Name</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div id="textButton">
Go to anywhere
<a id="btnSave" class="btn btn-primary">Go to anywhere</a>
<input class="btn btn-primary" type="button" id="btnNewSave" value="Save" />
<input type="text" id="getValue" value="#item.Name" hidden />
</div>
</div>
</div>
</div>
}
</div>
</div>
Script:
#section scripts {
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$("#btnNewSave").click(function () {
var data = $("#getValue").val();
$.ajax({
type: "GET",
url: '/ListCoachController/AnotherListCoach',
data: { id: data },
success: function (data) {
console.log(data);
window.location.href = '/appUser/ManageAccount';
return data;
},
error: function () {
$("#loader").fadeOut("slow");
console.log("error1");
}
});
});
});
</script>
}
Update:
Based on your new requirement on comment you just need to update your HTML like below:
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4">
<div class="card" style="width: 18rem;">
#*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*#
<div class="card-body">
<h5 class="card-title">#item.Name</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div id="textButton">
Go to anywhere
<a class="btn btn-primary" onClick="PassToContoller(#item.Name)">Go to anywhere</a>
<input class="btn btn-primary" type="button" onClick="PassToContoller(#item.Name)" value="Save" />
<input type="text" id="getValue" value="#item.Name" hidden />
</div>
</div>
</div>
</div>
}
</div>
</div>
Note: You have to get rid of id="btnSave" from all the <a> and <button> and need to replace with
onClick="PassToContoller(#item.Name)" it will pass all of your
value. No matter how many cycle you have.
Update with Comment Can I do without?:
HTML:
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4">
<div class="card" style="width: 18rem;">
#*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*#
<div class="card-body">
<h5 class="card-title">#item.Name</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div id="textButton">
<a href="#" class="btn btn-primary" >Go to anywhere</a>
<a class="btn btn-primary">Go to anywhere</a>
<input class="btn btn-primary" type="button" value="Save" />
<input type="text" id="getValue" value="#item.Name" hidden />
</div>
</div>
</div>
</div>
}
</div>
</div>
Script:
#section scripts {
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
function PassToContoller(data) {
alert(data);
$.ajax({
type: "GET",
url: '/UserLog/AnotherListCoach',
data: { id: data },
success: function (data) {
console.log(data);
window.location.href = '/appUser/ManageAccount';
return data;
},
error: function () {
$("#loader").fadeOut("slow");
console.log("error1");
}
});
}
$(document).ready(function () {
$("a").click(function () {
var data = $("#getValue").val();
var callFunc = PassToContoller(data)
});
$(":button").click(function () {
var data = $("#getValue").val();
var callFunc = PassToContoller(data)
});
});
</script>
}
Hope it would guide you accordingly. You can used either of the approach.
With GET method, you should pass the data via query string
/TrainingType/ListCoach?id=1
In ASP.NET MVC, we have default route template is {Controller}/{Action}/{id}
So, alternative we can use this URL
/TrainingType/ListCoach/1
I'm struggling in figuring out a way to get the content in one of my "tab-content" from an action other than my index
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
#Html.ActionLink("Analysis History", "Index", "Feedback", new { Tab = "Analysis" }, new { #class = "nav-link active" })
</li>
<li class="nav-item">
#Html.ActionLink("Pending Analysis Requests", "PendingList", "Feedback", new { Tab = "Pending" }, new { #class = "nav-link active" })
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade #(ViewBag.Hash == "Analysis" ? "show active" : "")" id="Analysis" role="tabpanel" aria-labelledby="Analysis-tab">
<div> .... </div> // WORKS FINE
</div>
<div class="tab-pane fade #(ViewBag.Hash == "Pending" ? "show active" : "")" id="Pending" role="tabpanel" aria-labelledby="Pending-tab">
<div>
//HERE I WANT THE RESULT FROM PENDINGLIST ACTION
</div>
</div>
</div>
Action
public async Task <IActionResult> PendingList (int AnalysisPage = 1, string Tab = "Pending")
{
ViewBag.Hash = Tab;
//POPULATING THE MODEL
return PartialView("_PendingAnlaysisRequestsList", model);
}
_PendingAnlaysisRequestsList partial is holding a table to display model content
ps: in index action I'm setting ViewBag.Hash and the whole action returns view()
Is using ajax the only solution or is there any other ways ?
any suggestions is appreciated !
In my opinion, I suggest you could use ajax and tab content to achieve your requirement, you could use ajax to load the view and generate the Hyperlink to show them.
More details, you could refer to below codes:
Notice: You should replace the ajax url with your own url.
<div>
<ul class="nav nav-tabs justify-content-center">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" role="tab" aria-controls="Analysis" id="Analysislink"
href="#Analysis">Analysis</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" role="tab" aria-controls="Pending" id="Pendinglink"
href="#Pending">Pending</a>
</li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="Analysis" role="tabpanel" aria-labelledby="Analysis-tab">
</div>
<div class="tab-pane fade" id="Pending" role="tabpanel" aria-labelledby="Pending-tab">
</div>
</div>
#section scripts
{
<script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.js"></script>
<script>
$("#Analysislink").click(function () {
$.ajax({
url: "/Staff/Onboarding/StaffDetails?StaffID=#Model.StaffID",
type: "get",
success: function (result) {
$("#Analysis").html(result);
}
})
});
$("#Pendinglink").click(function () {
$.ajax({
url: "/Staff/Onboarding/Biodata",
type: "get",
success: function (result) {
$("#Pending").html(result);
}
})
});
$(function () {
$.ajax({
url: "/Staff/Onboarding/StaffDetails?StaffID=#Model.StaffID",
type: "get",
success: function (result) {
$("#Analysis").html(result);
}
})
})
</script>
}
Result:
I've solved it simply by the following modifications:
PendingList Action
public async Task <MyIndexModel> PendingList (int AnalysisPage, string Tab)
{
ViewBag.Hash = Tab;
//POPULATING THE MODEL
return model;
}
Index Action:
if(Tab == "Analysis")
{
//POPULATING THE MODEL WITH DEFFERENT DATA
}
if(Tab == "Pending")
{
model = PendingList(AnalysisPage,Tab).Result;
}
View:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
#Html.ActionLink("Analysis History", "Index", "Feedback", new { Tab = "Analysis" }, new { #class = "nav-link active" })
</li>
<li class="nav-item">
#Html.ActionLink("Pending Analysis Requests", "PendingList", "Feedback", new { Tab = "Pending" }, new { #class = "nav-link active" })
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade #(ViewBag.Hash == "Analysis" ? "show active" : "")" id="Analysis" role="tabpanel" aria-labelledby="Analysis-tab">
<div> .... </div> // WORKS FINE
</div>
<div class="tab-pane fade #(ViewBag.Hash == "Pending" ? "show active" : "")" id="Pending" role="tabpanel" aria-labelledby="Pending-tab">
<div>
//HERE I LISTED THE RESULT IN A TABLE
</div>
</div>
</div>
Best Regards
EDIT: Problem solved! I had no data in my database, so the foreach loop had no model items to iterate through. Upon populating the database, the HTML within the foreach loop is rendering correctly on the view.
My brain is currently hurting due to this problem I have with my partial view not being rendered within my Home/Index view.
I am trying to use Html.Action() helper to call my PhotoGallery action within my Photos controller in order to dynamically populate and return a _PhotoGallery.cshtml partial view.
Here is my PhotoGallery action in my Photos controller:
[ChildActionOnly] //This attribute means the action cannot be accessed from the brower's address bar
public ActionResult PhotoGallery(int num = 0)
{
//In the view, display the latest photos when num is greater than 0
//Otherwise, display all photos
List<Photo> photos;
if (num == 0)
{
photos = db.Photos.ToList();
}
else
{
photos = db.Photos
.OrderByDescending(p => p.createdDate)
.Take(num).ToList();
}
return PartialView("~/Views/Shared/_PhotoGallery.cshtml", photos);
}
Views/Home/Index.cshtml:
#{
ViewBag.Title = "Welcome to PhotoSocial";
}
<p class="lead">Create an account to instantly share your favourite moments with everyone.</p>
<h2>Latest Photos:</h2>
#Html.Action("PhotoGallery", "Photos", new { num = 3 })
Views/Shared/_PhotoGallery.cshtml:
#model IEnumerable<SocialNetwork.Models.Photo>
#{
Layout = null;
}
#foreach (var item in Model)
{
<div class="" id="photo-gallery">
<h3>
#Html.DisplayFor(modelItem => item.title)
</h3>
#if (item.photoFile != null)
{
<div class="photo-display">
<img class="" src="#Url.Action("GetImage", "Photo", new { photoId = item.photoId})" />
</div>
}
<div class="" id="photo-data">
<div>
<div class="" id="display-label">
<p>Uploaded by:</p>
</div>
<div class="display-field">
#Html.DisplayFor(modelItem => item.username)
</div>
</div>
<div>
<div class="" id="display-label">
#Html.DisplayNameFor(model => model.createdDate):
</div>
<div class="display-field">
#Html.DisplayFor(modelItem => item.createdDate)
</div>
</div>
<div>
<div class="" id="display-label">
#Html.DisplayNameFor(model => model.modifiedDate):
</div>
<div class="display-field">
#Html.DisplayFor(modelItem => item.modifiedDate)
</div>
</div>
</div>
#Html.ActionLink("Details", "Details", new { id = item.photoId }) |
#Html.ActionLink("Delete", "Delete", new { id = item.photoId })
</div>
}
Here is the HTML source code that is rendered upon loading up Home/Index:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to PhotoSocial</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">PhotoSocial</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
<li>Register</li>
</ul>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<p class="lead">Create an account to instantly share your favourite moments with everyone.</p>
<h2>Latest Photos:</h2>
<hr />
<footer>
<p>© 2019 - Thomas Dam</p>
</footer>
</div>
<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
</body>
</html>
As you can see in the final output, my Home/Index.cshtml and _Layout view have correctly rendered, however my _PhotoGallery partial view has not been rendered.
I have tried Html.RenderAction() but I need the model to map a photo to the view. I have also tried Html.RenderPartial() but I need to return a Model object. One thing I've noticed, though, is that when I place HTML outside of the #foreach loop, it appears on my view!
What is it that I am doing wrong? Thanks guys.
I have a paged list in a ajax tabbed pane where I load partial views. I have made use of the built in ajax in IPagedlist but partial view is not being replaced properly, what am I doing wrong
My Ajax calls /Account/CustomerTab this finds the correct view and redirectsAction to Customer Controller and calls the partial view and inserts it in the tab div.
When clicking next it calls /Customer/Invoice?page=2 and returns that in the url instead of replacing the div 'replaceDiv'.....Now I sit with just the partial view in the window without the rest of the site.
Here is the main page with the tabbed pane, if you look in the ajax call you will see I insert n div with a class "replaceDiv"
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h3>Account Information</h3>
<div class="tab-container left clearfix">
<ul id="tabStrip" class="nav-tabs clearfix">
<li class="active">Business Information</li>
<li class="">Addresses</li>
<li class="">Pro forma Invoice</li>
<li class="">Invoices</li>
<li class="">Order History</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="0">#Html.Action("Information", "Customer")</div>
<div class="tab-pane" id="1"></div>
<div class="tab-pane" id="2"></div>
<div class="tab-pane" id="3"></div>
<div class="tab-pane" id="4"></div>
</div><!-- End .tab-content -->
</div><!-- End .tab-container -->
</div><!-- End .col-md-12 -->
</div><!-- End .row -->
#section scripts{
<script type="text/javascript">
$('#tabStrip a').click(function (e) {
e.preventDefault()
var tabID = $(this).attr("href").substr(1);
$(".tab-pane").each(function () {
$(this).empty();
});
$("#" + tabID).empty().append("<div class='loader'><img src='/Content/img/Loader/ajax-loader.gif' alt='Loading' /></div>");
$.ajax({
url: "/Account/CustomerTab",
data: { Id: tabID },
cache: false,
type: "get",
dataType: "html",
success: function (result) {
$("#" + tabID).empty().append("<div id='replaceDiv'>" + result + "</div>");
}
});
$(this).tab('show')
});
</script>
}
here is my partial view with the page list where I try to replace the html but all i get is a new html page with just my list in and not replacing the div.
<h2 class="sub-title">Invoices</h2>
#using (Html.BeginForm("Invoices", "Customer", FormMethod.Get))
{
<p>
Find by Invoice Number: #Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
<input type="submit" value="Search" />
</p>
}
<table class="table table-hover">
<thead>
<tr>
<th>Invoice Number</th>
<th>Date</th>
<th>Total</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
#foreach (var inv in Model)
{
<tr>
<td>#inv.InvoiceNumber</td>
<td>#inv.DateCompleted</td>
<td>#inv.TotalAmount</td>
</tr>
}
</tbody>
</table>
#Html.PagedListPager(Model, page => Url.Action("Invoices", "Customer", new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions { HttpMethod = "get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "replaceDiv" }))
EDIT
I find that if I add if (Request.IsAjaxRequest()) in my controller then it doesn't get hit. so its not an ajax request being sent through. This is what the rendered HTML looks like
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#replaceDiv" href="/Customer/Invoices?page=3">3</a>
I found the problem. All the code is correct except My knowledge of javascript is a bit limited. I needed to include the jquery.unobtrusive-ajax.min.js package and now its working like a charm.
net mvc 5 application and for this I use bootstrap because it looks fine.
I don't want to use for an input and a searchbutton the
#using (Html.BeginForm("...
Can I control the html tags without this from my controller. For example here is my index.cshtml
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container">
<div class="row">
<h2>Suche</h2>
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class=" search-query form-control" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-danger" type="button">
<span class=" glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
I want if I click on the Searchbutton I get a message with the text from the inputfield.
Here is the Controller:
public ActionResult Search(string value)
{
//listofUsers is a arraylist of all users that found^^
return View(listofUsers);
}
How I can do this? :)
Add a div to show the result:
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class=" search-query form-control" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-danger" type="button">
<span class=" glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="custom-search-result"></div>
Then in a script tag or a linked js file:
$(document).ready(function () {
$('.custom-search-input').each(function () {
var sinput = $(this);
var svalue = sinput.find('input');
var sresult = sinput.next('.custom-search-result');
sinput.find('button').click(function () {
$.ajax({
url: '/ControllerName/Search?value=' + svalue.val(),
type: 'GET'
}).done(function (result) {
sresult.html(result);
});
});
});
});
This is a basic example with no error handling.
First I highly recommend reading Philip Walton (Google) - Decoupling your HTML, CSS and Javascript, it's extremely good.
Here how I would use MVC to it's full potential.
Model:
// Extensible Programming
// Using a string limits additional features
// Future proofing via a class that takes 2 minutes to create
public class GlobalSearch
{
public string SearchTerms { get; set; }
}
View:
#Model GlobalSearch
<div class="container">
<div class="row">
<h2>Suche</h2>
<div id="custom-search-input">
#using (Html.BeginForm("Search"))
{
<div class="input-group col-md-12">
#Html.TextBoxFor(m => m.SearchTerms, new {
#class="search-query form-control",
placeholder="Search" })
<span class="input-group-btn">
<button class="btn btn-danger" type="button">
<span class=" glyphicon glyphicon-search js-form-submit"></span>
</button>
</span>
</div>
}
</div>
</div>
</div>
Controller:
// Strongly Typed Class is Returned
public ActionResult Search(GlobalSearch search)
{
return View(listofUsers);
}
The following script will require this fantastic script called form2js which correctly converts any strongly-typed forms generated by MVC (arrays, lists etc) into Json that will be ModelBinded correctly.
$(document).ready(function() {
('.js-form-submit').on('click', function() {
var $form = $(this).closest('form');
var json = form2js($form);
var ajaxSettings = {
url: $form.attr('action'),
type: $form.attr('method'),
data: json,
contentType: "application/json",
}
$.ajax(ajaxSettings)
.done()
.always()
.fail();
});
});
Of course this could be easily abstract into it's own javascript class/namespace that returns the promise and reusable on any form that simply has a button with the class js-form-submit instead of continually rewriting $.ajax over and over again each time for different forms.