showing a view as popup in mvc4 pattern - asp.net-mvc

I've a view rendered with Razor engine and I need to open at a button click a popup to insert a new user (i've already got my view/controller for the InsertUser)
I wish to know what the correct workflow to perform this, if I open it with jQuery how do I tell after the insert to close the view? my controller doesn't know it's on a popup and I've not seen any CloseResult as ActionResult... I'm using also KendoUI, I've seen it has the Window control....this as well won't help me on this.....what's best to use for opening a popup?
Thanks

Try reading this article on progressive enhancement, while you might not want to do it progressivly the article contains all the little recipes you will need to do it.
Your get action would be like this:
[HttpGet]
public ActionResult ContactUs()
{
return PartialView("_ContactUs");
}
Your post like this:
[HttpPost]
public ActionResult ContactUs(ContactUsInput input)
{
if (!ModelState.IsValid)
{
return PartialView("_ContactUs", input);
}
return PartialView("_ThanksForFeedback", input);
}
The front end something like this:
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
</script>
<a class="openDialog" data-dialog-id="emailDialog"
data-dialog-title="Contact Us" href="/Home/ContactUs">Contact Us</a>

Related

Query is not defined error jquery-ui.min.js

I am getting a Chrome console jQuery is not defined error for jquery-ui.min.js
In my site I put jquery call at bottom:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<!--JScript to Make iframe go behind footer nav upon scrolling in IE -->
<script type="text/javascript">
var $j = jQuery.noConflict();
jQuery(document).ready(function($j){
$j('iframe').each(function() {
var url = $j(this).attr("src");
if ($j(this).attr("src").indexOf("?") > 0) {
$j(this).attr({
"src" : url + "&wmode=transparent",
"wmode" : "Opaque"
});
}
else {
$j(this).attr({
"src" : url + "?wmode=transparent",
"wmode" : "Opaque"
});
}
});
});
</script>
The page is this: http://www.mexpro.com/mexico/auto/insurance.html
jQuery-UI is only a plugin for jQuery. You need to add this instead.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>

Autocomplete not working in asp.net mvc

I am trying to create a textbox that autocomplete when a user start do search for some name, but it's not working.
Here is my view:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" type="text/css" rel="Stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txtSearch").autocomplete({
source: '#Url.Action("pesquisarUsuario")',
minLength: 0
});
});
</script>
<h2>Index</h2>
#using (#Html.BeginForm())
{
#Html.TextBox("pesquisa", null, new { id = "txtPesq" })
<input type="submit" value="Pesquisar" />
}
And here is my controller:
public JsonResult pesquisarUsuario(string term)
{
List<string> usuario;
usuario = db.usuario.Where(u => u.nomecompleto.StartsWith(term))
.Select(u => u.nomecompleto).ToList();
return Json(usuario, JsonRequestBehavior.AllowGet);
}
Am I missing something? because my textbox does not show any users when I start do write.
First try if usuario returns anything. :-)
Try in your browser: http://localhost:port/yourcontroller/pesquisarUsuario?term=t
It should return all records starting with 't'.
If it does not return anything, here is your problem.
If it does, try to set the full url:
$(document).ready(function () {
$("#txtSearch").autocomplete({
source: 'http://yourserver/yourcontroller/pesquisarUsuario',
minLength: 0
});
});
EDIT:
I have created this tutorial with a fully working example: http://r2d2.cc/2014/09/11/autocomplete-jquery-ui-with-asp-net-mvc-simple-example/

Jquery mobile is not applying styles when the page is dynamically added

Hi I have a small app that uses JQM and Sammy. I am using Sammy to load pages dynamically and appending to the body of my index.html. the problem is i dont see the JQM themes are getting applied and there are no errors in console as well.
Are there any reason for this. I do call the following
context.render('view/abc.template')
.appendTo(context.$element(),function(){
$(document).ready(function () {
$("#container").trigger('pagecreate');
});
});
Thanks
This is how I did it;
1) firstly I disabled my JQM routing like so in a file called plugins.js;
$(document).bind("mobileinit", function() {
/**
* check out http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/ for more details
*/
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
This code was loaded before I loaded JQM, like so;
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="js/vendor/sammy/sammy.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vendor/sammy/plugins/sammy.template.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js"></script>
Then my main.js function looks like this;
(function($) {
var app = $.sammy('#main', function() {
this.use('Template');
this.get('#/', function(context) {
context.load('/templates/index.template', function() {
$("#container").trigger('pagecreate');
}).appendTo(context.$element());
});
this.get('#/landing', function(context) {
context.load('/templates/landing.template', function() {
$("#container").trigger('pagecreate');
}).replace(context.$element());
});
});
$(function() {
app.run('#/');
});
})(jQuery);
I think you are not far off on your code snippet above. NB you have your $(document).ready function as a callback to appendTo, which does not take a callback. You will see mine is in load() which does

jQuery never called

I'm trying to implement the solution provided in this question here:
How to pass Model Value through ActionLink
So in my view I have an action link
#Html.ActionLink("Look up registration", "RegLookup", "Vehicle", new {#id="check"},null)
And in a Javascript file I have :
$(function ()
{
$("#check").click(function (e) {
e.preventDefault();
}
I've cut the function down to just preventing the default action of the action link.
In the view I've also referenced the java script files
<script src="~/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="~/Scripts/GetRegistrationPlate.js" type="text/javascript"></script>
However when I click on the action link the default method continues to fire.
What might I have missed?
For one there are many syntax errors. Try this
$(function () {
$("#check").click(function (e) {
e.preventDefault();
return false;
});
});
Edit: Also, change the ActionLink to
#Html.ActionLink("Look up registration", "RegLookup", "Vehicle", new { #id = "check" }, new { #id = "check" })
The first id is for the route, the second id is for the html element.

ASP.NET MVC | Problem about showing modal dialog using jQuery dialog widget

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.

Resources