Hey.
I have followed the MVC4 tutorial on pluralsight where i learned creating Ajax partial view With search, pager and autocomplete functions. Now i wanted to improve my skills by adding modal popup for creating, editing and deleting. The modal Works only if i dont do anything inside the ajaxview, for instance a search or use the pager. I appreciate any help With this.
Edit Method:
// GET: Stasjon/Edit/5
public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Stasjon stasjon = db.Stasjoner.Find(id);
if (stasjon == null)
{
return HttpNotFound();
}
if (Request.IsAjaxRequest())
{
return PartialView("_Edit", stasjon);
}
return View("_Edit", stasjon);
}Edit view:
@model CodeFirstDB.Models.Stasjon<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title" id="myModalLabel">Rediger @Model.StasjonNavn</h4></div>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="modal-body"><div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.StasjonID)<div class="form-group">
@Html.LabelFor(model => model.StasjonNr, htmlAttributes: new { @class = "control-label col-md-2" })<div class="col-md-10">
@Html.EditorFor(model => model.StasjonNr, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.StasjonNr, "", new { @class = "text-danger" })</div></div></div></div><div class="modal-footer"><button class="btn" data-dismiss="modal">Cancel</button><input class="btn btn-primary" type="submit" value="Save" /></div>
}
PartialView rendred in index:
@model IPagedList<CodeFirstDB.Models.StasjonListeViewModel><div id="stasjonListe"><div class="pagedList" data-cfdb-target="#stasjonListe">
@Html.PagedListPager(Model, page => Url.Action("Index", new { page }),
PagedListRenderOptions.MinimalWithItemCountText)</div><table class="table table-striped table-condensed table-hover"><tr><th>Name</th></tr>
@foreach (var item in Model)
{<tr><td>@item.Name</td><td>
@Html.ActionLink("Edit","Edit", "Stasjon", new { id = item.Id }, new { data_modal = "", @class = "glyphicon glyphicon-wrench" })</td></tr>
}</table><div class="pagedList" data-cfdb-target="#stasjonListe">
@Html.PagedListPager(Model, page => Url.Action("Index", new { page }),
PagedListRenderOptions.MinimalWithItemCountText)</div></div>Gridview.js (including autocomplete and search):
$(function () {
//ajax search function
var ajaxFormSubmit = function () {
// grab a reference to the form to be submitted
var $form = $(this);
// options object
var options = {
// url we are going to
url: $form.attr("action"),
//type of request to make
type: $form.attr("method"),
// data to send to server
data: $form.serialize()
};
// make async call
$.ajax(options).done(function (data) {
// target to update
var $target = $($form.attr("data-cfdb-target"));
// replace target with anything from server
var $newHtml = $(data);$target.replaceWith($newHtml);$newHtml.effect("highlight");
});
// prevent from navigating away from the page
return false;
};
//select autocomplete
var selectAutocompleteForm = function (event, ui) {
var $input = $(this);
// set value$input.val(ui.item.label);
var $form = $input.parents("form:first");
// submit itself$form.submit();
};
//autocomplete function
var createAutocomplete = function () {
var $input = $(this);
var options = {
// source= Where to get the data (required)
source: $input.attr("data-cfdb-autocomplete"),
select: selectAutocompleteForm
};$input.autocomplete(options);
};
var getPage = function () {
var $a = $(this);
var options = {
url: $a.attr("href"),
data: $("form").serialize(),
type: "get"
};$.ajax(options).done(function (data) {
var target = $a.parents("div.pagedList").attr("data-cfdb-target");$(target).replaceWith(data);
});
return false;
};
// select form and call submitfunction
$("form[data-cfdb-ajax='true']").submit(ajaxFormSubmit);
// find input and for each call function$("input[data-cfdb-autocomplete]").each(createAutocomplete);$(".body-content").on("click", ".pagedList a", getPage);
});modalform.js:
$(function () {$.ajaxSetup({ cache: false });$("a[data-modal]").on("click", function (e) {
// hide dropdown if any
$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');$('#myModalContent').load(this.href, function () {$('#myModal').modal({
/*backdrop: 'static',*/
keyboard: true
}, 'show');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {$('#myModal').modal('hide');
//Refresh$('#replacetarget').load(result.url);
//location.reload();
} else {$('#myModalContent').html(result);
bindForm();
}
}
});
return false;
});
}let me know if you need more info. Thanks :)