JQuery Accordion in Razor View MVC3
Recently I needed to create a list of items that the user can rank eg. one above another. I used the accordion available from jquery and created one in a list, draggable and droppable, for each item in my databse that needs ranking.
At first it was a little tricky, however got it working in the end. Also included; on the drop event I post via Jquery to the databse so that the new ranking position of the item can be persisted should the user exit the form.
JAVASCRIPT
$(document).ready(function () {
var stop = false;
$(“#accordion h3”).click(function (event) {
if (stop) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
}
});
$(“#accordion”)
.accordion({
header: “h3”,
active: false,
autoHeight: false,
collapsible: true,
encode: false,
change: function (event, ui) {
}
})
.sortable({
axis: “y”,
handle: “h3”,
receive: function (event, ui) {
$(ui.item).removeClass();
$(ui.item).removeAttr(“style”);
alert(‘receive’);
},
stop: function (event, ui) {
var currentHeaderID = ui.item.find(“a”).attr(“id”);
$.post(‘@Url.Action(“ACTIONNAME”, “CONTROLLERNAME”)’, { inCriteriaID: currentHeaderID, inRankingOrder: ui.item.index()}, function (data) {
// get the result and do some magic with it
var message = data.Message;
$(“#resultMessage”).html(message);
});
stop = true;
}
}
);
});
ACCORDION (scuzzy for the formatting, rl bsy on sumthn else act)
<div id=”accordion”> @foreach (var item in Model) { <div> <h3> <a id=@item.YOURID.ToString() href=”#”>@Html.Raw(@item.YOURTITLE) </a> </h3> <div> @* add table with more info here if you want*@ </div> </div> } </div>
Posted on December 8, 2011, in jquery, MVC3, RAZOR and tagged Jquery, MVC3, RAZOR. Bookmark the permalink. Leave a comment.
Leave a comment
Comments 0