How to generate a javascript link in asp.net mvc?
eg.
Pop it
Can I use Html.ActionLink and how to do this?
I could do something like this:
Pop it
But I just want to find out will there be some better solutions for this?
Many thanks.
Yes, you can do something like:
<%=Html.ActionLink(model.Title, "View", "PoppedView", new { Id = model.Id.ToString() }, new { target="_blank" })%>
I would look at doing this using jQuery UI and a dialog instead of a new window. You can use the open handler to load up the content into the dialog.
<%= Html.ActionLink( "Pop It",
"ItemDetail",
"Item",
new { ID = model.ID },
new { #class = "popup-link" } ) %>
<script type="text/javascript">
$(function() {
$('.popup-link').click( function() {
var href = $(this).attr('href');
$('<div><p class="popup-content"></p></div>').dialog({
autoOpen: true,
modal: true,
height: 200,
width: 400,
open: function() {
$(this).find('.popup-content').load(href);
},
close: function() {
$(this).dialog('destroy');
}
});
return false;
});
});
</script>
Related
If I initialize my modal like this:
$("#dlg").dialog({
open: function (e) {
$(this).load('mvc action url');
},
close: function () {
$(this).dialog('destroy').empty();
},
modal: true
});
...it initializes as modal. However, if I leave out modal: true at initialization and try to set modality after the dialog is already open like this:
$("#dlg").dialog("option", "modal", true);
...it doesn't work. I know it's being set because I can alert the modal value after setting it. I'm also properly referencing jquery-ui's library because I can open it as modal at initialization.
Edit
Here's a fiddle:
http://jsfiddle.net/s9zmfkdn/1/
When you click open initially, it shows as modal as expected. Now remove the line as I instruct in the fiddle. When you open the dialog this time and then click Make it modal, nothing happens
So there are a few things that are causing this to fail to work as you anticipated.
You wrapped the initialization of the dialog in a function, so it was not globally available to other functions.
You destroy the dialog upon close, so it no longer exists to allow the change of the modal option.
It's not clear why you're doing it this way and I suspect there is something you're not sharing. Regardless, here is one example that works:
http://jsfiddle.net/Twisty/s9zmfkdn/2/
HTML
<div id="basesystem" title="whatever" style="display:none"></div>
<input type="button" class="moduleloader" value="Open" />
<input id="makemodal" type="button" value="Remove Modal" />
JavaScript
$(function() {
$("#basesystem").dialog({
open: function(e) {
$(this).html('<span>hello</span>');
},
close: function() {
$(this).empty();
},
modal: true,
autoOpen: false
});
$("#makemodal").click(function() {
if ($("#basesystem").dialog("option", "modal")) {
$("#basesystem").dialog("option", "modal", false);
$(this).val("Make Modal");
} else {
$("#basesystem").dialog("option", "modal", true);
$(this).val("Remove Modal");
}
});
$(".moduleloader").click(function() {
$("#basesystem").dialog("open");
});
});
Now if you need, you can define the object more globally and manipulate it like so:
http://jsfiddle.net/Twisty/s9zmfkdn/4/
HTML
<div id="basesystem" title="whatever" style="display:none"></div>
<input type="button" class="moduleloader" value="Open" />
<input id="makemodal" type="button" value="Remove Modal" data-modal="true" />
JavaScript
$(function() {
var $diag = $("#basesystem");
$(".moduleloader").click(function() {
$diag.dialog({
open: function(e) {
$diag.html('<span>hello</span>');
},
close: function() {
$diag.dialog("destroy").empty();
},
modal: $("#makemodal").data("modal")
});
});
$("#makemodal").click(function() {
if ($(this).data("modal")) {
$(this).data("modal", false);
$(this).val("Make Modal");
} else {
$(this).data("modal", true);
$(this).val("Remove Modal");
}
});
});
This creates a new dialog every time and destroys it upon close. The only difference is that modal preference is stored someplace. You could also do this by storing it in global variable too.
Update 1
Based on your description, what you'll want to do is remove or create the ui-widget-overlay element.
Try this on for size: http://jsfiddle.net/s9zmfkdn/5/
$(function() {
function removeOverlay() {
$(".ui-widget-overlay").remove();
}
function setOverlay() {
if ($(".ui-widget-overlay").length) {
return false;
}
var $ov = $("<div>", {
class: "ui-widget-overlay"
}).css({
width: $(window).width(),
height: $(window).height(),
zIndex: 1001
});
$("body").append($ov);
}
$("#basesystem").dialog({
open: function(e) {
$(this).html('<span>hello</span>');
var $button = $("<a>", {
href: "#"
}).html("Toggle Modal").button().click(function() {
if ($(".ui-widget-overlay").length) {
removeOverlay();
} else {
setOverlay();
}
}).appendTo($(this));
},
close: function() {
$(this).empty();
},
modal: true,
autoOpen: false
});
$("#makemodal").click(function() {
if ($("#basesystem").dialog("option", "modal")) {
$("#basesystem").dialog("option", "modal", false);
$(this).val("Make Modal");
} else {
$("#basesystem").dialog("option", "modal", true);
$(this).val("Remove Modal");
}
});
$(".moduleloader").click(function() {
$("#basesystem").dialog("open");
});
});
I am trying to get a JQueryUI (1.8.23) dialog to work on an ASP.NET MVC view. I have specified the dialog to "autoOpen: false" and have specified some buttons on the dialog as well.
The first problem is that the dialog doesn't seem to respect the "autoOpen: false" declaration and always opens when the page loads. The second problem is that the buttons I have specified don't display; either when I open the dialog from links on the page or when it opens when the page loads.
My Javascript that sets up the dialog is:
$(function() {
var actionUrl = "";
var passReason = $("#passReason"),
allFields = $([]).add(passReason);
$("#pass-dialog").dialog({
autoOpen: false,
height: 100,
width: 300,
modal: true,
buttons: {
"Pass": function() {
actionUrl = actionUrl.replace('COMMENT', escape(passReason.combobox('getValue')));
document.location = actionUrl;
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
},
close: function() {
$(this).dialog("close");
}
});
$(function() {
$("#passReason").combobox({
url: '<%= Url.Action("GetOverrideReasonCodes", "Statistics") %>',
valueField: 'code',
textField: 'description',
method: 'GET',
mode: 'remote'
});
});
});
function getManagerComment(jobId, routeId, crisId) {
actionUrl = '<%= Url.Action("ManualCompleteSegment", "Statistics", new RouteValueDictionary{{"jobId", "JOBID"}, {"routeId", "ROUTEID"}, {"crisId", "CRISID"}, {"comment", "COMMENT"} }) %>';
actionUrl = actionUrl.replace('JOBID', jobId);
actionUrl = actionUrl.replace('ROUTEID', routeId);
actionUrl = actionUrl.replace('CRISID', crisId);
$("#pass-dialog").dialog("open");
}
function getManagerRouteComment(jobId, routeId) {
actionUrl = '<%= Url.Action("ManualCompleteRoute", "Statistics", new RouteValueDictionary{{"jobId", "JOBID"}, {"routeId", "ROUTEID"}, {"comment", "COMMENT"} }) %>';
actionUrl = actionUrl.replace('JOBID', jobId);
actionUrl = actionUrl.replace('ROUTEID', routeId);
$("#pass-dialog").dialog("open");
}
and the that represents the content of my dialog is:
<div id="pass-dialog" title="Enter Pass Reason">
<form>
<fieldset>
<label for="passReason">Pass Reason: </label>
<input id="passReason" name="passReason" class="easyui-combobox" />
</fieldset>
</form>
</div>
I have the beneath the emitted HTML.
Any suggestions?
Thanks,
Matthew
Found out there was a conflict between jQueryUI and "EasyUI" CSS files. Once I removed the EasyUI from the equation and went to a more manual population of my dropdown, everything worked as expected.
I want to return a partial view in Jquery Dailog and wanted to pass the viewmodel object to particular controller action, how to do that?
View
#Html.DropDownListFor(model => model.SelectedCountry, new SelectList(Model.CountryList, "CountryCode", "CountryName"), "---SELECT COUNTRY---",
new { #class = "chosen", #onchange = "this.form.action='/Home/Index'; this.form.submit(); " })
<input type="button" id="button1" value="Push"/>
<div id="dialog" title="Report" style="overflow: hidden;"></div>
Js
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'Report',
modal: true,
open: function() {
//here how to pass viewmodel
$(this).load("#Url.Action("CreatePartial")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#button1').click(function () {
$('#dialog').dialog('open');
});
});
Controller
public ActionResult CreatePartial(HomeViewModel homeViewModel)
{
return PartialView("_CreatePartial", homeViewModel);
}
Currently, "homeViewModel.SelectedCountry" is Null, how to pass model in Jquery?
If you're using AJAX, you should not use HTTP GET to pass model to server. Instead use HTTP POST (as in $().ajax({method: 'POST'}) and pass data as POST data ($().ajax({method: 'POST', data: #Html.Raw(Json.Encode(Model))}))
You convert the model into an JSON object by using the the build-in JSON-helper, just modify your request to:
$(this).load('#Url.Action("CreatePartial")',#Html.Raw(Json.Encode(Model)));
#Html.Raw is needed to prevent HTML-Encoding.
I tested it and it worked.
Hi; i have a problem. i want to open a popup(Jqueryui popup) on webpage. But i can not. How to make it correctly?
View:
grid.Column("", format: (item) => Html.ActionLink("Click", "", "", new { #customerId = ConvertUtil.ToInt(item.Id) }, new { #class = "popupLink" })),
OR
grid.Column("", format: (item) => Html.ActionLink("Click", "Edit", "Customer", new { #customerId = ConvertUtil.ToInt(item.Id) }, new { #class = "popupLink" })),
Jquery Code:
$(".popupLink").click(function () {
jQuery('#dialog').dialog('open');
});
Controller
public ActionResult Edit()
{
return View();
}
i need also id value. Not only popup. i wan to open Edit Pop up. How to open edit popup any row?
First of all, you need to stop default action of the click event
$(".popupLink").click(function (e) {
$('#dialog').dialog('open');
e.preventDefault();
});
That will show empty dialog (of course if you have #dialog container in your view).
Before showing the dialog you must load proper view. I would do this like that:
var url = $(this).attr('href');
$('#dialog').load(url);
Finally, the whole solution:
$(".popupLink").click(function (e) {
$('#dialog').load($(this).attr('href'));
$('#dialog').dialog('open');
e.preventDefault();
});
The following solution can be reused on an ActionLink without modifying the source document. It also won't show the dialog until the loading is complete:
$("a.popuplink").live("click", function (evt) {
evt.preventDefault();
$("<div></div>").insertAfter(this);
$.ajax({
url: this.href,
context: this
}).done(function (data) {
$(this).next('div').html(data);
$(this).next('div').dialog();
});
});
I am very fresh to asp.net mvc and jQuery. After one day trying, I still don't know how to pop up a jQuery dialog using data from a action(return JsonResult) while user click a link.
Any suggest or guideline is appreciate.
Thanks!
Thx for Stuntz & RhinoDevX64 's reply, finally I work it out.
jQuery Code:
<script type="text/javascript">
$(function() {
$('.newsitem').click(function() {
var $thisLink = $(this);
$('#dialog').empty();
$.getJSON($thisLink.attr("href"), function(data) {
$('#dialog').html(data.content);
$("#dialog").dialog({
autoOpen: false,
title: data.title,
bgiframe: true,
modal: true,
height: 450,
width: 540,
buttons: {
'关闭': function() {
$(this).dialog('close');
}
}
});
$('#dialog').dialog('open');
});
return false;
});
});
</script>
ActionLink
<%= Html.ActionLink(item.Title, "GetByJs", "Article", new { id = item.ID }, new { #class = "newsitem" })%>
Action Code
public ActionResult GetByJs(Guid id) {
var item = Article.SingleOrDefault(a => a.ID == id && a.AtFront == true);
var jsonData = new {
title = item.Title, content = item.BodyContent
};
return new JsonResult {
Data = jsonData
};
}
var ph = $("#idOfPlaceHolderInPage");
ph.load(/Controller/SomeActionWhichReturnsPartialView, function() {
// this callback will be called after your partial view loaded into placeholder
ph.dialog({
// pass options here to customize dialog
});
});
1st use jQuery UI follow their documentation for including the css and js files.
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript" ></script>
<script src="../../Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<link href="../../Content/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$("#idOfModalPlaceholder").dialog({autoOpen: false, title:"MODAL TITLE"});
});
function OpenModalGetContent(){
$("#idOfModalPlaceHolder").load("/Controller/View");
$("#idOfModalPlaceHolder").dialog('open');
}
</script>
CLICK HERE FOR MODAL
2nd You should really just use a regular ActionResult and a Partial View (*.ascx), if you are just grabbing some content;
if you are calling data I presume you may be loading into an autocomplete which would be completely different than this scenario.