So I have a view that allows users to Approve or Reject items listed on the page. When approved, I simply use the @Ajax.ActionLink to post to the appropriate controller action. When the user Rejects an item, the user is required to enter a reason for the rejection. I'm found code on the internet that gave me a popup dialog and added a textbox and OK/Cancel buttons. I can capture the input from the user and show it in an alert, but now I need to complete it and I'm not sure how.
1st - I need add functionality to pass to my jquery link handler, the ID associated with the Item being rejected.
2nd - I need a way to call my Controller Action from the jquery.
Here is the code I have up to this point.
My link is simply an 'a' tag. I can't see to post the code for this without removing the <> a href="#dialog" name="modal" Reject a
My script handles this here
$(document).ready(function () {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
开发者_如何转开发 //transition effect
$(id).val('');
$(id).fadeIn(2000);
});
Here is my pop up dialog and the mask that grays out the screen when the dialog is opened.
<div id="boxes">
<div id="dialog" class="window">
Enter the reason for rejection:</br>
<textarea class="multiline" id="rejectreason" rows="10" cols="20"></textarea><br/>
<div style="margin-left: 120px"><input type="button" value="OK" class="ok" style="width:70px"/> <input type="button" value="Cancel" style="width:70px" class="close"/>
</div>
</div>
<!-- Mask to cover the whole screen -->
<div id="mask"></div>
</div>
It could be that I'm going about this completely wrong, but it's all I could find on line and pieced it all together from there. As this is my first experience with jquery and MVC, I'm struggling a bit here. Any help would be greatly appreciated.
Thanks
UPDATE
OK, so I added a data-id attribute to my link that allows me to get the ID of the link clicked. I tested it using this code and it works. var iD = $(this).attr('data-id');
I now need to pass this value to my dialog so I can then retrieve it again when the OK button on the dialog is clicked. I can set a hidden field on the page if necessary and retrieve it from there.
Here is some code to get you on the right path...
jQuery Ajax:
$(document).ready(function () {
$("#InputButtonId").click(function () {
$.ajax({
url: '@Url.Action("SomeAction", "Controller")',
type: 'POST',
data: { id: $("#hidden").val(), reason: $("#rejectreason").html },
dataType: "json",
beforeSend: function () {
},
success: function (result) {
// Do action if success
},
error: function (result) {
// Do action if error
}
});
return false;
});
});
And the controller action:
[HttpPost]
public JsonResult SomeAction(string id, string reason)
{
//Perform Actions
return Json(new
{
value1 = value1,
value2 = value2
}, JsonRequestBehavior.AllowGet);
}
Hope this helps.
精彩评论