I ran into total confusion.
I am returning a Partial View to the below dynamic model which I will show in jQuery widget.
#model dynamic
#using (Html.BeginForm("Edit", null, FormMethod.Post))
{
#Html.EditorForModel()
--input type="submit" value="Edit" --
}
jquery script to show the view in pop up
$("#my-dialog").dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true
});
$(".modal").click(function () {
$("#my-dialog").load(this.href, function () {
$(this).dialog("open");
});
return false;
});
but my datetime picker is not showed in pop up partial view.
Can somebody advise what is wrong here?
The datetime picker display in the partial view has been solved by using the below script in my partial view:
$(".datetime").datetime();
Related
I am using knockout to render a page with rows of data. On each row there is a link which should call a controller function which returns a partial view.
knockout script for link is (inside foreach loop)...
<a class="lnkEdit" data-bind="attr: {'href': '#Url.Action("ControllerActionName", new RouteValueDictionary() { { "Controller", "ControllerName" } })/'+ id}">Details</a>
Script section...
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$("#dialog-edit").dialog({
title: 'Details',
autoOpen: false,
resizable: false,
position: ['center', 50],
width: 700,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
}
});
$(".lnkEdit").on("click", function (e) {
url = $(this).attr('href');
$("#dialog-edit").dialog('open');
return false;
});
$("#btncancel").on("click", function (e) {
$("#dialog-edit").dialog("close");
return false;
});
ko.applyBindings(new UnitViewModel());
})
My page has div as place holder for dialog...
<div id="dialog-edit" style="display: none">
Problem: When I click on link for details; the controller returns partial view but jquery is not able to generate dialog so the page opens as normal view. What is wrong with this?
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
I'll Check Your code and is working...
just add CSS and JS proper.
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.
Okay, so I'm trying to display a dialog, and the contents of that dialog is from a partial view, _TestPartial.
Here is the partial view:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<div id="test" title="Basic dialog">
<p>This is just a test</p>
</div>
Now, if I put the test div in my .aspx that is displaying the dialog, it will show just fine. Or if I call the partial right from my page it will show 'This is just a test' just fine. I just have no idea how to make a jquery dialog display a partial. I've tried a few things, such as having my dialog call an Action, TestAction, which renders the _TestPartial, but that doesnt even work. I have a feeling I'm missing a key piece of code somewhere tho. Here is my dialog code(its called automatically based on a select list choice):
if ($('#SelectListID option:selected').text() == 'Test') {
$('#test').dialog({
width: 400,
resizable: false,
title: 'Test dialog',
open: function(event, ui) {
$(this).load("#Url.Action('TestAction')");
},
buttons: {
"Close": function (){
$(this).dialog("close");
}
}
});
}
I remember having a similar problem before. We added a dialog container and then loaded the partial view in an inner div.
<div id="dialogcontainer">
<div id="dialogcontent"></div>
</div>
$("#dialogcontainer").dialog({
width: 400,
resizable: false,
title: 'Test dialog',
open: function(event, ui) {
$("#dialogcontent").load("#Url.Action('TestAction')");
},
buttons: {
"Close": function (){
$(this).dialog("close");
}
}
});
I have a primary form defined and nicely laid out, it does what it needs to do...
#{ Html.BeginForm(); }
#Html.ValidationSummary(false)
#Html.AntiForgeryToken()
#Html.EditorFor(model => model)
<h2>Properties</h2>
<hr />
#* I want to put some stuff here... *#
<br class="space" />
<div class="clearfix">>
<button type="submit" data-bind="click: save">
Save
</button>
</div>
#{ Html.EndForm(); }
Now, then. This model (or ViewModel, rather) has an IList<PropertyViewModel> attached to it.
A PropertyViewModel has its own set of validations. They are pretty simple for now, but there is a chance that later there will be more complicated uses for this setup.
I am using KnockoutJS for my viewModel consistency. Though I suppose it is fairly irrelevent. I want to display a second form in a jQuery UI Dialog and return the result, essentially..
<script type="text/javascript">
var viewModel = {
name: ko.observable(),
description: ko.observable(),
properties: ko.observableArray(),
save: function () {
alert(ko.toJSON(viewModel));
},
includeProperty: function () {
$("#dialog").dialog({
width: 500,
closeText: '',
resizable: true,
buttons: {
'Submit': function () {
$(this).dialog('close');
callback( #* I want the new data to get sent back *# );
},
'Cancel': function () {
$(this).dialog('close');
return false;
}
}
});
}
};
function callback(value) {
alert(ko.toJSON(value)); // (I will push the new property to the viewmodel here)
}
ko.applyBindings(viewModel);
</script>
However, I am not really sure how to actually put the EditorTemplate into the dialog, moreover I am not sure how to get the data back out of it.
I don't completely understand your question, but from what I understood what you are trying to do is pass data to the dialog and retrieve data from the dialog. If that is the case then this may be useful:
http://api.jquery.com/jQuery.data/
Here is detailed example on how to use:
Passing data to a jQuery UI Dialog
I was experimenting with jQuery UI and MVC3 and I stumbled upon the following issue:
I have very basic page that uses AJAX
<%: Ajax.ActionLink("Edit", "Edit", new { id = 1 }, new AjaxOptions() { UpdateTargetId = "dialog", OnSuccess = "DisplayPopup" }, null)%>
<div id="dialog" title="Location">
</div>
This is the controller code:
public ActionResult Edit(int id)
{
return PartialView();
}
[HttpPost]
public ActionResult Edit()
{
return Content("Saved!");
}
and partial view edit:
<b>whatever</b>
<% using (Ajax.BeginForm("Edit", "Home",
new AjaxOptions()
{
UpdateTargetId = "editForm",
HttpMethod = "POST"
}))
{%>
<div id="editForm">
<input type="submit" value="Save" />
</div>
<% } %>
the code above works fine.
now I add the jquery UI popup code:
<script type="text/javascript">
function DisplayPopup() {
$('#dialog').dialog('open');
}
$('#dialog').dialog({
autoOpen: false,
width: 600,
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
</script>
after that in Firefox and Chrome it works fine, whereas in IE8 I see the following issue:
click edit - makes AJAX call to Edit(int id) action and shows the edit view inside a popup
click save - makes AJAX call to Edit() and shows the text "Saved!"
close the popup
click edit - AJAX call to Edit(int id) - again
click save - this time it makes FULL postback (only in IE)
any ideas?
Thanks!
Try this seeing it works the first time but not the second. Create the dialog new every time and destroy it when you are done.
<script type="text/javascript">
function DisplayPopup() {
$('#dialog').dialog({
autoOpen: true,
width: 600,
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}, close: function() {
$(this).dialog("destroy");
}
});
}
</script>
I had the same trouble: worked in FF, but not in IE8.
Try adding something to the partial view response.
I was having this same trouble in IE and ended up adding #ViewBag.Message to the partial view response, where ViewBag.Message = "Submitted " + DateTime.Now.ToLongTimeString(); was assigned in the controller on Post.
This suddenly and surprisingly caused the partial view to render in the correct target element instead of loading the view as a new page in IE8.