I am working on a View for an MVC5 app. This is an Edit View with multiple properties, several of which are related to other models. I have my main INV_Assets model and then several other tables for Location, Manufacturer, Model, Status, Type, Vendor, etc. On this Edit view, I'm displaying those particular properties as dropdown lists containing all values currently in those tables, along with a [CREATE NEW] button by each list.
When user selects the [CREATE NEW] button, I have a hidden form which appears and allows a user to enter a new value for the specific Table/DropDown. I've got everything working except the POST where I add the value to the Table and refresh the DropDown list.
Below is what I have put together for my first dropdown (the Model selection) -- everything is functioning up to the POST:
INV_Assets.Edit View:
<div class="form-group">
<span class="control-label col-md-2">Manufacturer:</span>
<div class="col-md-4">
@Html.DropDownListFor(model => model.Manufacturer_Id, (SelectList)ViewBag.Model_List, htmlAttributes: new { @class = "form-control dropdown" })
@Html.ValidationMessageFor(model => model.Manufacturer_Id, "", new { @class = "text-danger" })
</div>
<div class="col-md-1">
<div class="btn-group">
<button type="button" class="btn btn-success" aria-expanded="false">CREATE NEW</button>
</div>
</div>
</div>
INV_Assets.Edit Script:
<script type="text/javascript">
$(document).ready(function () {
// Show() form to enter new Model.
$('#createNewModel').click(function () {
$('#createModelFormContainer').show();
})
// Submit new Model value and refresh dropdown
$('#submitNewModel').click(function () {
alert("New Function!"); // WORKING
var form = $(this).closest('form');
var url = form.attr('action');
var data = { Text: form.find('input').first().val() };
alert("Prior to Post"); // WORKING
$.post(url, form.serialize(), function (data) {
alert("Begin POST!"); // NOT BEING REACHED!
$('#selectModel').append($('<option></option>').val(data.ID).text(data.Text));
form[0].reset();
$('#createModelFormContainer').hide();
})
});
});
</script>
When my code hits the $.post something goes wrong. It was previously getting:
Since post() seemed to be the anonymous function, I assumed I did not have ajax installed. I then installed Microsoft.jQuery.Unobtrusive.Ajax, which now renders my error as: Failed to load resource: the server responded with a status of 404 (Not Found) - http://localhost:4545/INV_Assets.
Any thoughts on this?
As best as I understand it, my submit should be posting to my below createNewModel() method inside my INV_AssetsController:
[HttpPost]
public JsonResult createNewModel(INV_Models model)
{
model.created_date = DateTime.Now;
model.created_by = System.Environment.UserName;
model.modified_date = DateTime.Now;
model.modified_by = System.Environment.UserName;
if (ModelState.IsValid == false && model.Id == 0)
{
ModelState.Clear();
}
if (ModelState.IsValid)
{
db.INV_Models.Add(model);
db.SaveChangesAsync();
}
return Json(new { ID = model.Id, Text = model.model_description });
}
Assuming it is something to do with my routing, this is my current RouteConfig.cs:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
Anyone with more expertise able to see what I'm doing wrong?
Aucun commentaire:
Enregistrer un commentaire