I'm having two pages inbox.aspx and compose.aspx
by ajax I'm loading the compose page inside a div in inbox page
so I'm facing a problem with form coz I'm using form in master page for inbox and in compose page
when I'm loading compose page i will have two nested form :(
i tried to omit it but the page won't load without it specially when i put asp control inside it
till now every things worked without an error but in compose page i have link button when i click it I'm having an error
(too much recursion,Empty string passed to getElementById())
and it is not firing , but asp:button tag is working perfectly
here is the code
inbox.aspx
<div class="row email">
<div id="list-toggle" class="col-md-2">
<ul class="list-unstyled">
<li class="composeBtn">
<a href="javascript:;" data-title="Compose" class="btn Compose btn-danger">Compose
</a>
</li>
</ul>
<ul class="emailNav nav nav-pills nav-stacked margin-bottom-10">
<li class="inbox active">
<a href="javascript:;" data-title="Inbox">
<i class="fa fa-inbox fa-fw"></i>Inbox (2)
</a>
</li>
<li class="starred">
<a href="javascript:;" data-title="Starred">
<i class="fa fa-star fa-fw"></i>Starred
</a>
</li>
<li class="sent">
<a href="javascript:;" data-title="Sent">
<i class="fa fa-mail-forward fa-fw"></i>Sent Items
</a>
</li>
<li class="draft">
<a href="javascript:;" data-title="Draft">
<i class="fa fa-files-o fa-fw"></i>Drafts
</a>
</li>
<li class="spam">
<a href="javascript:;" data-title="Spam">
<i class="fa fa-ban fa-fw"></i>Spam
</a>
</li>
<li class="trash">
<a href="javascript:;" data-title="Trash">
<i class="fa fa-trash-o fa-fw"></i>Trash
</a>
</li>
</ul>
</div>
<div class="col-md-10">
<div class="emailContent"></div>
</div>
</div>
javascript
var Inbox = function () {
var main_content = $('.emailContent');
/*-----------------------------------------------------------------------------------*/
/* Show single email view
/*-----------------------------------------------------------------------------------*/
var showSingleEmail = function (el, name, resetMenu) {
alert('');
var url = 'inbox_email.html';
main_content.html('');
toggleButton(el);
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
main_content.html(res);
App.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
/*-----------------------------------------------------------------------------------*/
/* Show WYSIWYG Editor
/*-----------------------------------------------------------------------------------*/
var showWYSIWYG = function () {
alert('');
function initToolbarBootstrapBindings() {
var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
'Times New Roman', 'Verdana'],
fontTarget = $('[title=Font]').siblings('.dropdown-menu');
$.each(fonts, function (idx, fontName) {
fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
});
$('a[title]').tooltip({container:'body'});
$('.dropdown-menu input').click(function() {return false;})
.change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
.keydown('esc', function () {this.value='';$(this).change();});
$('[data-role=magic-overlay]').each(function () {
var overlay = $(this), target = $(overlay.data('target'));
overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
});
if ("onwebkitspeechchange" in document.createElement("input")) {
var editorOffset = $('#editor').offset();
$('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
} else {
$('#voiceBtn').hide();
}
};
function showErrorAlert (reason, detail) {
var msg='';
if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
else {
console.log("error uploading file", reason, detail);
}
$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button>'+
'<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
};
initToolbarBootstrapBindings();
$('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
}
/*-----------------------------------------------------------------------------------*/
/* Show Inbox view
/*-----------------------------------------------------------------------------------*/
var showInbox = function (el, name) {
alert('');
var url = 'inbox_main.html';
main_content.html('');
toggleButton(el);
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
main_content.html(res);
App.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
/*-----------------------------------------------------------------------------------*/
/* Show email reply view
/*-----------------------------------------------------------------------------------*/
var showEmailReply = function (el) {
alert('');
var url = 'inbox_email_reply.html';
main_content.html('');
toggleButton(el);
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
main_content.html(res);
handleCCControl();
handleCCBCC();
showWYSIWYG();
$('#editor').html($('#reply-content').html());
$('#reply-content').hide();
App.initUniform();
$('#editor').focus();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
/*-----------------------------------------------------------------------------------*/
/* Show Compose view
/*-----------------------------------------------------------------------------------*/
var showCompose = function (el) {
alert('');
var url = 'InboxCompose.aspx';
main_content.html('');
//toggleButton(el);
//
$.ajax({
type: "POST",
cache: false,
url: url,
//dataType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(res)
{
// $(".emailContent").load("InboxCompose.aspx #EmailComposeContent");
// toggleButton(el);
//$(".emailContent").load("InboxCompose.aspx");
main_content.html(res);
// showWYSIWYG();
// handleCCBCC();
// $('#editor').focus();
// App.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
// App.setPage("Teacher"); //Set current page
// App.setAction("ComposeEmail"); //Set current page
// App.init(); //Initialise plugins and elements
}
/*-----------------------------------------------------------------------------------*/
/* Show Compose view
/*-----------------------------------------------------------------------------------*/
var handleCCBCC = function () {
alert('');
$('.emailCompose .address').on('click', '.emailCC', function () {
handleCCControl();
});
$('.emailCompose .address').on('click', '.emailBCC', function () {
handleBCCControl();
});
}
/*-----------------------------------------------------------------------------------*/
/* Show Compose view
/*-----------------------------------------------------------------------------------*/
var handleCCControl = function () {
alert('');
var the = $('.emailCompose .address .emailCC');
var input = $('.emailCompose .inputCC');
the.hide();
input.show();
$('.close', input).click(function () {
input.hide();
the.show();
});
}
/*-----------------------------------------------------------------------------------*/
/* Show Compose view
/*-----------------------------------------------------------------------------------*/
var handleBCCControl = function () {
alert('');
var the = $('.emailCompose .address .emailBCC');
var input = $('.emailCompose .inputBCC');
the.hide();
input.show();
$('.close', input).click(function () {
input.hide();
the.show();
});
}
/*-----------------------------------------------------------------------------------*/
/* Toggle button
/*-----------------------------------------------------------------------------------*/
var toggleButton = function (el) {
alert('');
if (typeof el == 'undefined') {
return;
}
if (el.attr("disabled")) {
el.attr("disabled", false);
} else {
el.attr("disabled", true);
}
}
return {
init: function () {
alert('');
///* Show main inbox screen */
//$('.emailNav > li.inbox > a').click(function () {
// showInbox($(this), 'inbox');
//});
/* Show compose screen */
$('.email .composeBtn').on('click', 'a.Compose', function () {
showCompose($(this));
});
///* Show email reply screen */
//$('.email').on('click', '.replyBtn', function () {
// showEmailReply($(this));
//});
///* Show single email screen */
//$('.emailContent').on('click', '.viewEmail', function () {
// showSingleEmail($(this));
//});
///* Handle CC control links */
//$('.emailCompose .address').on('click', '.emailCC', function () {
// handleCCControl();
//});
///* Handle BCC control links */
//$('.emailCompose .address').on('click', '.emailBCC', function () {
// handleBCCControl();
//});
///* Show main inbox for the first load */
//$('.emailNav > li.inbox > a').click();
}
};
}();
Compose.aspx
<html>
<body>
<form id="form" runat="server" method="get">
<div id="EmailComposeContent" class="emailCompose form-horizontal">
<div class="emailField" >
<label class="control-label pl-none">
<span>To:</span>
</label>
<div class="fields col-md-11">
<asp:TextBox type="hidden" class="bigdrop js-data-example-ajax col-md-9 selectDynamic noborder" runat="server"
data-groupname="ToGroup" data-groupcontrol="ToGroupList"
ID="TextBoxToIDs" data-url="InboxCompose.aspx/GetXMLData" value="16340"></asp:TextBox>
<div class="col-md-3">
<ul id="ToGroupList" class="pagination pagination-sm mb-none mt-none">
<li id="ParentGroup" class="anchor Sections "
onclick="setSection(this);">
<span class='f-lightergray'><span data-original-title="Parent" data-title="P" class="text">P</span>
<input id='RadioParentGroup' name="ToGroup" checked="checked" type="radio" value="3" style="display: none" /></span>
</li>
<li id="StudentGroup" class="anchor Sections "
onclick="setSection(this);">
<span class='f-lightergray'><span data-original-title="Student" data-title="S" class="text">S</span>
<input id='RadioStudentGroup' name="ToGroup" type="radio" value="2" style="display: none" /></span>
</li>
<li id="AdviserGroup" class="anchor Sections "
onclick="setSection(this);">
<span class='f-lightergray'><span data-original-title="Adviser" data-title="A" class="text">A</span>
<input id='RadioAdviserGroup' name="ToGroup" type="radio" value="5" style="display: none" /></span>
</li>
</ul>
</div>
</div>
</div>
<div class="emailField">
<label class="control-label ">
Title:</label>
<div class="fields col-md-9">
<asp:TextBox CssClass="form-control" ID="TextBoxTitle" runat="server" type="text" ></asp:TextBox>
</div>
</div>
<div class="emailField">
<label class="control-label ">
Expiry Date:</label>
<div class="fields col-md-4">
<asp:TextBox CssClass="form-control datepicker" ID="TextBoxExpiryDate" runat="server" type="text" ></asp:TextBox>
</div>
<label class="control-label ">
Publish Date:</label>
<div class="fields col-md-4">
<asp:TextBox CssClass="form-control datepicker" ID="TextBoxPublishDate" runat="server" type="text" ></asp:TextBox>
</div>
</div>
<div class="emailField">
<div class="divide-20"></div>
<div id="alerts"></div>
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font"><i class="fa fa-font"></i><b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
<li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
<li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
<a class="btn btn-default" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
<a class="btn btn-default" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
<a class="btn btn-default" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
<a class="btn btn-default" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>
<a class="btn btn-default" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-outdent"></i></a>
<a class="btn btn-default" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a>
<div class="dropdown-menu input-append">
<input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
<button class="btn btn-default" type="button">Add</button>
</div>
<a class="btn btn-default" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-scissors"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i></a>
<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
<a class="btn btn-default" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
</div>
<input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
</div>
<div id="editor">
Write email here…
</div>
</div>
<div class="emailComposeButtons">
<button class="btn btn-default">Discard Draft</button>
<button class="btn btn-default"><i class="fa fa-paperclip"></i> Attach Files</button>
<asp:LinkButton type="submit" runat="server" OnClick="Send_Click" ID="SendBtn" CssClass="btn btn-info"><i class="fa fa-check-square-o"></i> Send</asp:LinkButton>
<asp:LinkButton runat="server" OnClick="Unnamed_Click" ID="sdzs">sfsfsfsf</asp:LinkButton>
<asp:Button ID="btn" OnClick="btn_Click" runat="server"/>
<i class="fa fa-check-square-o" onclick=" document.getElementById('btn').click();"></i>
</div></div>
</form>
</body>
</html>
c#
protected void btn_Click(object sender, EventArgs e)
{
BusinessLayer.EmailsController oEmailsController = new BusinessLayer.EmailsController();
oEmailsController.Title = TextBoxTitle.Text;
oEmailsController.PublishedDate = DateTime.Parse(TextBoxPublishDate.Text);
oEmailsController.ExpiryDate = DateTime.Parse(TextBoxExpiryDate.Text);
oEmailsController.FromGroupID = 1;
string toIDs = TextBoxToIDs.Text;
oEmailsController.FromID = Convert.ToInt32(System.Web.HttpContext.Current.User.Identity.Name.Split('$')[2]);
oEmailsController.SendStatus = (int)Enumeration.EmailSendStatus.send;
oEmailsController.ToLevelGroupID = (int)Enumeration.EmailSendStatus.send;
Response.Redirect("inbox.aspx", false);
}
Try Replacing href="javascript:;" to href="javascript:void(0);" in your tags
Related
I have a problem displaying the data that I got in Controller from ajax.
What I want to do?
I'm displaying a list of "Candidate" with a specific function (Candidate is my Model) like this:
The View for this :
<form method="post" asp-action="Index" >
<div class="panel panel-primary" style="margin-left: -190px">
<div class="panel-heading" >
<center>
CEO
</center>
</div>
<div class="panel-body" >
<div id="position">
#foreach(var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.CEO))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
#*<center><input type="checkbox" value="" name="ceo_id" class="ceo"></center>*#
#if (User.IsInRole("User"))
{
<center><input type="checkbox" value="#candidate.candidate_id" name="ceo_id" class="ceo" ></center>
//<div id="log">#candidate.candidate_id</div>
}
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
#*<a class="btn btn-success btn-block" onclick="SaveList()" asp-action="voteresult"> Voteaza </a>*#
</div>
</div>
</ul>
<div class="panel panel-primary" style="margin-left: -15px">
<div class="panel-heading">
<center>
Product Manager
</center>
</div>
<div class="panel-body">
<div id="position">
#foreach (var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.ProductManager))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
<center><input type="checkbox" value="" name="productmanager_id" class="productmanager"></center>
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-left: -15px">
<div class="panel-heading">
<center>
CTO
</center>
</div>
<div class="panel-body">
<div id="position">
#foreach (var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.CTO))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
<center><input type="checkbox" value="" name="cto_id" class="cto"></center>
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-left: -15px">
<div class="panel-heading">
<center>
Sales Manager
</center>
</div>
<div class="panel-body">
<div id="position">
#foreach (var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.SalesManager))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
<center><input type="checkbox" value="" name="salesmanager_id" class="salesmanager"></center>
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-left: -15px">
<div class="panel-heading">
<center>
Finance Manager
</center>
</div>
<div class="panel-body">
<div id="position">
#foreach (var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.FinanceManager))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
<center><input type="checkbox" value="" name="financemanager_id" class="financemanager"></center>
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-left: -15px">
<div class="panel-heading">
<center>
HR
</center>
</div>
<div class="panel-body">
<div id="position">
#foreach (var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.HR))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
<center><input type="checkbox" value="" name="hr_id" class="hr"></center>
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-left: -7px; margin-right: -100px;">
<div class="panel-heading">
<center>
Accountant
</center>
</div>
<div class="panel-body">
<div id="position">
#foreach (var candidate in Model.Where(i => i.position == eVote.Data.Enums.Positions.Accountant))
{
<center><img class="rounded-circle" src="#candidate.imgurl" alt="#candidate.lastname" style="border-radius:6px;" height="100" width="100" /></center>
<center><button type="button" class="btn btn-primary btn-xs" style="border-radius:60px;margin-top:4px;">#candidate.firstname #candidate.lastname</button></center>
<center><input type="checkbox" value="" name="accountant_id" class="accountant"></center>
#if (User.IsInRole("Admin"))
{
<a class="btn btn-outline-primary" asp-controller="Candidate" asp-action="Details" asp-route-id="#candidate.candidate_id"><i class="fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-danger text-white" asp-action="Delete" asp-route-id="#candidate.candidate_id"><i class="fa fa-trash"></i></a>
}
}
</div>
</div>
</div>
#*#Html.ActionLink("Come back to Home", "voteresult", "Candidate")*#
<button class="btn btn-success ballot" type="submit"SaveList" name="submit" asp-controller="Candidate" asp-action="voteresult">Vote</button>
</form>
<script>
var SaveList = function() {
var checkboxData = $(".ceo:checked").val();
console.log(checkboxData);
$.ajax({
url: "/Candidate/voteresult",
type: 'POST',
dataType: 'json',
data: { guid: checkboxData }
//la fiecare click sa iti retina id-ul candidatului si aboa la final (
});
}
</script>
What I wanted to do was to send to controller the id of the selected one, and I used for that an ajax POST. I got my id of the selected on in my controller, and my controller called ,,Candidate" Looks like that:
[HttpPost]
public async Task<IActionResult> voteresult (Guid guid)
{
var candidate = await _context.Candidatati.FirstOrDefaultAsync(x => x.candidate_id == guid);
ViewBag.Message = candidate;
return View();
}
Now when I press the Button ,,Vote" I want to get my ViewBag Messsage to "voteresult" View. It looks like that:
#using eVote.Models;
<h1>Salut</h1>
<div class="col-lg-8" style="margin-left:240px;">
<div class="alert alert-info">
<label>CEO</label>
<br />
#{
var data = ViewBag.Message;
}
<p>#data.candidate.id</p>
</div>
</div>
But I got the message not found. I tried to make the post of checkbox value on click but if I done that, if goes to the controller with the correct id, but after I press button it goes to the controller with empty id. The main question is, how to go "voteresult" View keeping my checkbox data from controller?
I want to pop up my div class that contains user at password text box but nothings happen and I test also my function if its running correctly that's why I put alert in my function. This my code bellow. I try so many solution and yet still not show my div. Can any give me a best solution regarding this matter or other way to pop up the web form without leaving my current page.
#model TBSWebApp.Models.User
#{
ViewBag.Title = "UserLogin";
Layout = "~/Layout/_webLayout.cshtml";
}
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<div>
<fieldset>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="btnShowModal" type="button" class="btn btn-sm btn-default pull-left col-lg-11 button button4">
Sign-in
</button>
<div class="modal fade" tabindex="-1" id="loginModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Satya Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="text" placeholder="Login Username" id="inputUserName" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Login Password" type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">
©
<script>document.write(new Date().toDateString());</script>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
//$(document).ready(function () {
$("#btnShowModal").click(function () {
alert("test");
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
// });
</script>
I already solved my problem
<script>
$(document).ready(function () {
$("#submitButton").click(function () {
if (($("#userNameTextBox").val() != "") && ($("#passwordTextBox").val() != ""))
$.ajax(
{
type: "POST", //HTTP POST Method
url: "UserLogin/UserLogin", // Controller/View
dataType: "text/html",
data:
{ //Passing data
UserID: $("#userNameTextBox").val(),
Password: $("#passwordTextBox").val(),
}
});
});
});
//$(document).ajaxStart(function () { $("#loadingImg").show(); });
//$(document).ajaxStop(function () { $("#loadingImg").hide(); });
</script>
I have an HTML table which loads data from the database. When I click on a row a modal pop fetches more content from the database with an option to edit a change on the selected row.
My predicament is how do I populate a drop-down list and select a value saved in the database?
It is easy to bind other controls i.e. Textarea, input boxes etc. My issue is with dropdown lists.
FYI I'm using ASP.NET Web Forms with C# and I fetch the data from the database using jQuery AJAX and a WebService.
Thanx in advance.
I have mixed the presentation with the logic.
I have updated the question here is the js:
$("body").delegate("a.view-link", "click", function (e) {
e.preventDefault();
var requestID = $(this).data("reqid");
$.ajax({
type: "POST",
url: "../helpdeskservice.asmx/GetModalContent",
data: "{'requestID':'" + requestID + "'}",
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function (response) {
$('#modalEditCall').html(response.d); //Bind
$('#requestConfirmed').modal('toggle') } });
$('#modalEditCall').modal('toggle')
});
The WebService Method
[WebMethod]
public string GetModalContent(string requestID)
{
try
{
return ViewExtensions.GetCallModal(requestID);
}
catch (Exception ex)
{
throw ex;
}
}
The C# Class I use to build the html
public static string GetCallModal(string requestID)
{
var usrRequestObject = new DBHelpDesk();
var categories = usrRequestObject.GetCategories();
var modalddlCategories = new StringBuilder(String.Empty);
modalddlCategories.Append(#"<select class='custom-select w-100' id='modalddlCategory' required>");
foreach (var category in categories)
{
modalddlCategories.AppendFormat(#"<option value='{0}'>{1}</option>",category.CategoryID,category.Description);
}
modalddlCategories.Append("</select>");
var sb = new StringBuilder(String.Empty);
var userRequest = DBHelpDesk.GetCallByID(requestID);
sb.AppendFormat(#"
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title'>{0}</h5>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='txtDescription'>Description</label>
<input type='text' class='form-control' id='txtmodalDescription' placeholder='' value='' required>
<div class='invalid-feedback'>
Valid first name is required.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='state'>Category</label>
{1}
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
<div class='col-md-6 mb-3'>
<label for='state'>Sub-Category</label>
<select class='custom-select w-100' id='modalddlSubCategory' required>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='state'>Status</label>
<select class='custom-select w-100' id='modalddlStatus' required>
<option value='0'>Open</option>
<option value='1'>In-Progress</option>
<option value='2'>Awaiting Reply</option>
<option value='3'>Closed</option>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
<div class='col-md-6 mb-3'>
<label for='state'>Request Mode</label>
<select class='custom-select w-100' id='modalddlRequest' required>
<option value='0'>Low</option>
<option value='1'>Medium</option>
<option value='2'>High</option>
<option value='3'>Critical</option>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12 mb-3'>
<label for='cc-name'>Comments</label>
<textarea id='txtmodalEditor' class='form-control'>{3}</textarea>
</div>
</div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-primary'>Update Call</button>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
", DBHelpDesk.GetUserFullName(userRequest.UserID)
, modalddlCategories
, userRequest.Description
, userRequest.Comments);
return sb.ToString();
}
<div>
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../new/request.aspx">
<span data-feather="file"></span>
New Request
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Last quarter
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Share</button>
<button class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
</div>
</div>
<canvas class="my-4" id="myChart" width="900" height="380"></canvas>
<div class="row">
<div class="col-md-9 mb-3">
<h2>CALL LOG SHEET</h2>
</div>
<div class="col-md-3 mb-3">
<select class="form-control float-right">
<option>Open</option>
<option>Closed</option>
<option>All</option>
</select>
</div>
</div>
<asp:Literal ID="lblContent" runat="server"></asp:Literal>
</main>
</div>
</div>
<div id="modalEditCall" class="modal" tabindex="-1" role="dialog">
<asp:Literal ID="lblModalContent" runat="server"></asp:Literal>
</div>
Here is the dropdown list
enter image description here
I am using Bootstrap carousel slider script inside Repeater but its not working proper.I have projects database table i want to display this projects in slide 3 project by one slider each slide has 3 project . my code display one project per slide i don't know how to make it please help me .
Each slide : 1 2 3 then second one 4 5 6 at the same row with slider
this link has the same slide i want slider i want like it
<!-- Begin Carousel -->
<div class="row">
<div id="realto-carousel-afee" class="carousel slide">
<div class="carousel-navigation pull-right"> <a class="serif italic pull-left view-all-carousel" href="properties-grid-layout-2">All</a> <a class="left carousel-control pull-left" href="#realto-carousel-afee" data-slide="prev"><i class="fa fa-angle-left"></i></a> <a class="right carousel-control pull-right" href="#realto-carousel-afee" data-slide="next"><i class="fa fa-angle-right"></i></a> </div>
<div class="carousel-inner">
<asp:Repeater runat="server" ID="ProjectsRepater">
<ItemTemplate>
<div <%# Container.ItemIndex == 0 ? "class=\"item active\"" : "class=\"item\"" %>>
<div class="col-lg-4 col-md-4 col-sm-4 col-sx-12">
<div class="box-container">
<div class="holder"> <a class="overlay" href="" title=""> <span class="more"> <i class="fa fa-zoom-in"></i> </span>
<div class="prop_img"> <img width="370" height="210" src="150w" sizes="(max-width: 370px) 100vw, 370px" /> </div>
</a> <span class="prop-tag"></span>
<div class="prop-info">
<h3 class="prop-title">
<asp:Label ID="ProjId" runat="server" Visible="false" Text='<%# Eval("ID")%>'></asp:Label>
<asp:Label Text='<%# Eval("ProjectName")%>' ID="lblProjName" runat="server"></asp:Label>
</h3>
<ul class="more-info clearfix">
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important"></span>
<label id="lblArea" runat="server" class="qty pull-right">2</label>
</li>
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important"></span> <span id="lblPaymentsSystem" runat="server" class="qty pull-right">2</span> </li>
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important"></span> <span id="lblReceivedDate" runat="server" class="qty pull-right">2</span> </li>
</ul>
</div>
<!-- prop-info -->
</div>
<!-- holder -->
</div>
<!-- box-container -->
</div>
</div>
</ItemTemplate>
</asp:Repeater>
protected void Page_Load(object sender, EventArgs e)
{
// RepeterData();
ProjectsRepater.DataSource = GetAllProjecct();
ProjectsRepater.DataBind();
}
public class Proj
{
public int ID { get; set; }
public string ProjectName { get; set; }
}
public List<Proj> GetAllProjecct()
{
List<Proj> listproj = new List<Proj>();
SqlConnection con = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings ["AlamarConnectionString"].ConnectionString);
SqlCommand com = new SqlCommand("Select ID,ProjectName from Projects", con);
con.Open();
SqlDataReader reader = com.ExecuteReader();
while (reader.Read())
{
Proj cnt = new Proj();
cnt.ID = Convert.ToInt32(reader["ID"]);
cnt.ProjectName = Convert.ToString(reader["ProjectName"]);
listproj.Add(cnt);
}
return listproj;
}
See this codepen, I think this will solve your problem
HTML
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="slide slide1">slide 1 content here</div>
</div>
<div class="col-xs-4">
<div class="slide slide2">slide 2 content here</div>
</div>
<div class="col-xs-4">
<div class="slide slide3">slide 3 content here</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="slide slide4">slide 4 content here</div>
</div>
<div class="col-xs-4">
<div class="slide slide5">slide 5 content here</div>
</div>
<div class="col-xs-4">
<div class="slide slide6">slide 6 content here</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS
.slide {
height: 200px;
color: #fff;
font-size: 20px;
}
.slide1 {
background: red;
}
.slide2 {
background: yellow;
}
.slide3 {
background: blue;
}
.slide4 {
background: orange;
}
.slide5 {
background: green;
}
.slide6 {
background: violet;
}
http://codepen.io/Arshmeet/pen/BQKrOb
Follow a complete example of carousel that calls ajax in controller to populate 3 slides. I call just 1 record each calling for better performance but you can change.
View:
<div class="carousel slide" id="main-slide" data-ride="carousel">
<ol class="carousel-indicators text-center">
<li data-target="#main-slide" data-slide-to="0" class="active"></li>
<li data-target="#main-slide" data-slide-to="1"></li>
<li data-target="#main-slide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="" id="home1-link1">
<img id="home1-imagem1" alt="" title="" src="" width="20" height="20" class="img-responsive center-block">
<div class="carousel-caption" id="home1-caption1"><div id="home1-legenda1"></div></div>
</a>
</div>
<div class="item">
<a href="" id="home1-link2">
<img id="home1-imagem2" alt="" title="" src="" width="20" height="20" class="img-responsive center-block">
<div class="carousel-caption" id="home1-caption2"><div id="home1-legenda2"></div></div>
</a>
</div>
<div class="item">
<a href="" id="home1-link3">
<img id="home1-imagem3" alt="" title="" src="" width="20" height="20" class="img-responsive center-block">
<div class="carousel-caption" id="home1-caption3"><div id="home1-legenda3"></div></div>
</a>
</div>
</div>
<div class="slides-control">
<a title="Imagem Anterior" id="tras-home1-slide" class="carousel-control" href="#main-slide" data-slide="prev">
<i class="fa fa-angle-left"></i></a>
<a title="Imagem Posterior" id="frente-home1-slide" class="direita carousel-control" href="#main-slide" data-slide="next">
<i class="fa fa-angle-right"></i></a>
</div>
</div>
#section scripts {
<script type="text/javascript">
$(document).ready(function () {
var nrReg = 0;
var pag = "";
var i = 1;
var selecaoJquery = "";
var removeuTerceiroSlide = false;
function slide1() {
$.ajax({
url: "/Image/Slide",
type: "POST",
data: { "nrRegistro": nrReg },
ifModified: true,
cache: true,
async: true,
dataType: "json",
success: function (data) {
if (i == 2 && data.length == 0) {
$("#item-main-slide3").remove();
$("#carousel-indicator3").remove();
removeuTerceiroSlide = true;
return;
}
else if (i == 3 && data.length == 0) {
$("#item-main-slide3").remove();
$("#carousel-indicator3").remove();
if (removeuTerceiroSlide == true) {
$("#item-main-slide2").remove();
$("#carousel-indicator2").remove();
}
return;
}
if (i > 1) {
selecaoJquery = "#carousel-indicator" + i;
$(selecaoJquery).show();
}
selecaoJquery = '#home1-legenda' + i;
$(selecaoJquery).html(data[0].DescricaoLegenda);
selecaoJquery = '#home1-link' + i;
if (data[0].URLPagina == null) {
$(selecaoJquery).attr('href', '/lista/produtos');
}
else {
$(selecaoJquery).attr('href', '/produto/' + data[0].URLPagina);
}
selecaoJquery = '#home1-imagem' + i;
$(selecaoJquery).attr("src", data[0].EnderecoImagem).attr("title", data[0].Descricao)
.attr("alt", data[0].DescricaoAlternativa).attr("width", data[0].Largura).attr("height", data[0].Altura);
selecaoJquery = '#home1-caption' + i;
$(selecaoJquery).css('background-color', data[0].CorFundoLegenda);
i++;
}
});
};
nrReg = 1;
slide1();
nrReg = 2;
setTimeout(slide1(), 400);
nrReg = 3;
setTimeout(slide1(), 900);
$('#main-slide').carousel({ interval: 6000 });
});
</script>
}
Controller (/Image/Slide):
[HttpPost]
public async Task<JsonResult> Slide(int nrRegistro)
{
var recs = (from d in db.Imagem
where d.IdPostagemImagem == 1 &&
d.EnderecoImagem.Length > 0
orderby d.IdImagem
select new
{
d.IdImagem,
d.DescricaoLegenda,
d.EnderecoImagem,
d.CorFundoLegenda,
d.CorFundoLegendaMobile,
d.Descricao,
d.Largura,
d.Altura,
d.DescricaoAlternativa,
d.PosicaoHorizontalLegenda,
d.Produto.URLPagina
});
if (nrRegistro > 1)
{
nrRegistro--;
recs = recs.Skip(nrRegistro).Take(1);
}
else
recs= recs.Take(1);
return Json( await recs.ToListAsync());
}
I need to throw anywhere from 2 elements and up into an array that I can then jQuery.Ajax post to my MVC controller.
My issue is how to put them into an acceptable array or object that I can then pass to the MVC partial view?
I have classes setup I think will work for the buttons and jQuery btnMoveUp, btnMoveDown
I need to pass the data-procedureid and data-sortid to my MVC controller.
And for bonus points another part I think I will be stuck on. If they click the "Move Up" button. I need to grab the element above it and switch their sort orders. Or the "Move Down" button need to grab the element below it and switch their sort orders.
I'm hoping this will be as easy as jQuery(".btnMoveDown").next(".btnMoveDown").attr("data-sortorder") but i haven't tested this possibility.
Here is my future aJax:
$(".btnMoveUp").click(function () {
var currSortOrder = jQuery(this).data('sortorder');
// find the element above this one and grab the sort order
// switch the sort orders
$.ajax({
url: "YourController/GetData",
type: "get",
data: // What can I pass here that my MVC partial view can then use?
success: function (result) {
$("#procedures").html(result);
}
});
}
Here is the code:
<ul class="commentlist">
#{
int i = 1;
//foreach (var item in #Model.IPACS_Processes.IPACS_Procedures)
foreach (var item in #Model.IPACS_Procedures)
{
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left" />
<div class="comment-info">
<h4>
<a href="#Url.Action("ViewProcedure", new { id = item.procedureID })">
#item.name</a></h4>
<h5>
<small>Owner: </small>#item.owner</h5>
<br />
<p>
#item.description
</p>
<br />
<p>
#if (i > 1)
{
<a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="#item.procedureID" data-sortorder="#i"><span class="iconfa-double-angle-up icon-white">
</span>Move Up</a>
}
#if (i < #Model.IPACS_Procedures.Count)
{
<a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="#item.procedureID" data-sortorder="#i"><span class="iconfa-double-angle-down">
</span>Move Down</a>
}
#{i++;}
</p>
</div>
</li>
<br style="clear: both;" />
}
}
</ul>
Here it is generated:
<ul class="commentlist">
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
<div class="comment-info">
<h4>
<a href="/MasterList/ViewProcedure/123">
XYZ Process Server</a></h4>
<h5>
<small>Owner: </small>Some Dude</h5>
<br>
<p>
Enter Description for XYZProcess Server Procedure
</p>
<br>
<p>
<a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="122" data-sortorder="1"><span class="iconfa-double-angle-down">
</span>Move Down</a>
</p>
</div>
</li>
<br style="clear: both;">
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
<div class="comment-info">
<h4>
<a href="/MasterList/ViewProcedure/122">
XYZ2 Process Server</a></h4>
<h5>
<small>Owner: </small>Some Dude</h5>
<br>
<p>
Enter Description for XYZ2 Process Server Procedure
</p>
<br>
<p>
<a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="123" data-sortorder="2"><span class="iconfa-double-angle-up icon-white">
</span>Move Up</a>
<a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="123" data-sortorder="2"><span class="iconfa-double-angle-down">
</span>Move Down</a>
</p>
</div>
</li>
<br style="clear: both;">
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
<div class="comment-info">
<h4>
<a href="/MasterList/ViewProcedure/121">
XYZ3 Process Server</a></h4>
<h5>
<small>Owner: </small>Some Dude</h5>
<br>
<p>
Enter Description for XYZ3 Process Server Procedure
</p>
<br>
<p>
<a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="124" data-sortorder="3"><span class="iconfa-double-angle-up icon-white">
</span>Move Up</a>
<a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="124" data-sortorder="3"><span class="iconfa-double-angle-down">
</span>Move Down</a>
</p>
</div>
</li>
<br style="clear: both;">
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
<div class="comment-info">
<h4>
<a href="/MasterList/ViewProcedure/120">
XYZ4 Process Server</a></h4>
<h5>
<small>Owner: </small>Some Dude</h5>
<br>
<p>
Enter Description for XYZ4 Process Server Procedure
</p>
<br>
<p>
<a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="125" data-sortorder="4"><span class="iconfa-double-angle-up icon-white">
</span>Move Up</a>
</p>
</div>
</li>
<br style="clear: both;">
</ul>
I'm actually (literally) writing code like this right now. I am using jQuery UI to do the drag/drop re-ordering. (This code may be a little different then most other code examples).
jQuery/javascript
$(document).ready(function ()
{
$(".ui-sortable-container").sortable({
handle: ".handle",
stop: function (event, ui)
{
AJAX.postRouteUpdate();
}
});
var AJAX =
{
postRouteUpdate: function ()
{
// create object that matches MVC object
// not case sensitive
var request = {};
request.routeIDs = [];
var selector = ".ui-routes .ui-route";
// for each of my objects grab the routeid
// this is the new order of the routeids
// send them all in, it's just easier on the backend
// and allows for future multiple re-sorts before
// sending the request to the server
$(selector).each(function (index)
{
request.routeIDs.push($(this).data('routeid'));
// update the title value, as I have mine numbered
$(this).find('.title').text((index + 1).toString());
});
$.ajax({
url: '/Routes/UpdateSequence',
data: JSON.stringify(request),
type: 'GET',
success: function (result) {
$("#procedures").html(result);
}
});
}};
Model:
public class RouteUpdateModel()
{
public IEnumerable<int> RouteIDs { get; set; }
}
Controllers
public ActionResult UpdateSequence(RouteUpdateModel model)
{
this.db().UpdateSequence(model.RouteIDs);
return this.Partial(model);
}
View
#Model RouteUpdateModel
#foreach (var routeID in model.RouteIDs)
{
//do whatever
}