A partial view page (cshtml) is opened as a dialog by angularjs by a window click in a parent view page (cshtml), but the embedded component in the dialog does not respond to mouse inputs - eg it does not respond to clicks in chrome although it does in ie11.
specifically, I have a FileUltimate file browser control in the partial view page opened as a dialog. the cshtml is:
#using GleamTech.FileUltimate
#model FileManager
#using MyCompany.OWL.Website.Helpers
#{
Layout = null;
}
<head>
<title>File Browser</title>
#Html.RenderCss(Model)
#Html.RenderJs(Model)
</head>
<div class="overlay" id="fileBrowser">
<h1>File Manager<a href data-icon="×" data-ng-click="close()"></a></h1>
<div>
<div style="width:800px">
#Html.RenderControl(Model)
</div>
</div>
</div>
it is opened by an angularjs controller for the parent page
$scope.openFileManager = function () {
var modalItem = { project: $scope.item };
fileManager.openFileManager(modalItem);
};
which in turn calls
fileManagerFactory.factory('FileManager', ['$modal', function ($modal) {
return {
openFileManager: function (data) {
var modalInstance = $modal.open({
templateUrl: '/filemanager/filemanager?projectid=' + data.project.projectId,
controller: 'FileManagerController',
resolve: {
projectData: function () {
return data;
}
}
});
}
};
}]);
the associated mvc controller for the partial view is
[AccessAuthorize(Roles = "ProjectManagers")]
public ActionResult FileManager(int ProjectID)
{
FileManagerApiController api = new FileManagerApiController();
//return View(new[] { fileManager });
return PartialView("_FileManager",api.Get(ProjectID));
}
I am stumped for reasons why ie11 dialogs would work, but chrome and firefox would not. some keyboard input is processed by chrome, but no mouse. the failure is only on the fileultimate control. Does anyone know why the control does not respond in chrome? is it angularjs?
since the vendor does not believe that his control has a problem, I am exploring other ways of opening it without embedding it in a dialog cshtml, but my biggest problem is passing data from the parent view to the mvc controller of the file browser. the data is held in the html controls of the parent page and $scope variable which seems to preclude calling the control in a #Html.BeginForm. the file browser can only be opened after it is configured with record specific data in the parent window, and I cannot navigate away from the parent page. the file browser has its own stand alone ui.
ps - one other odd observance is that ie11, chrome44, and firefox33 render the dialog differently - 3 different renditions of the same cshtml.
Related
I trying to upload a file from popup window, validate the file on the server and send the message back to client. This message must appear in the same popup window where upload control is. ( not on the parent page)
Im using Kendo window for popup & Kendo upload control.
I’m trying to synchronously upload a file using upload control. The upload control resides in popup window. I have attached javascript “Success” event to the upload control however Success event never gets fired.
Issues:
1. Action method is returning JSON message, however Javascript Success event never gets fired on client so I could not handle the response message. (does it only get fired for async operation?)
2. Other option is, I can add the message in ModelState and return Upload View instead of JSON, however when view is returned, the upload view doesn’t appear as popup instead it appear as a page and also URL changes.
3. How do I configure OK button so that it won’t close the popup window.
Is asynchronous upload the only option I have here?
NOTE: I am not using asynchronous option because as Telerik reported here that IE doesn’t report the progress bar and in turn selected file doesn’t get uploaded to the server every time. So I am thinking even if I disable progress bar upload will still have issue. But I couldn’t find any details on this issue. If Kendo Upload gurrantees that if i disable progress bar, it will upload every file in IE 10,11 then i might consider using async option.
4. On that note how do i disable progress bar?
This is Index Page ( Parent Page)
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/FileUpload.js"></script>
<script>
$(document).ready(function () {
var uploadwindow = $("#uploadwindow");
$("#btnUploads").click(function (e) {
uploadwindow.data("kendoWindow")
.open()
.center();
});
});
</script>
<p/><p />
<button type="button" id="btnUploads">Show Window</button>
#(Html.Kendo().Window()
.Name("uploadwindow")
.Title("Select the file to upload")
.Draggable()
.Resizable()
.Width(600)
.Modal(true)
.Visible(false)
.LoadContentFrom("Upload", "FileUpload")
)
Popup Window
#using (Html.BeginForm("Upload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#(Html.Kendo().Upload()
.Name("file")
.Multiple(false)
.Events(x => x.Success("onSuccess"))
)
<button type="submit">Ok</button>
}
FileUpload.js
function onSuccess(e) {
//my custom method to show message
ShowMessage(e.response.message);
}
MVC Controller
public class FileUploadController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Upload()
{
return View();
}
[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
return Json(new { message = "This is from server" }, "text/plain");
//Option 2
// if i return View here then it does not appear as popup instead it renders as page
//ModelState.AddModelError("Some error");
//return View();
}
}
In onSuccess function, instead of directly showing the message as e.response.message try the following:
parser the JSON obtained as $.parseJSON(e.XMLHttpRequest.responseText) and assign it to a variable.
Call ShowMessage() with the parsed response.
function onSuccess(e) {
var msg = $.parseJSON(e.XMLHTTPRequest.responseText);
ShowMessage(msg);
}
I had the same problem, it is resolved by using inline java script function for .Event of Kendo FileUpload :
#using (Html.BeginForm("Upload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#(Html.Kendo().Upload()
.Name("file")
.Multiple(false)
.Events(x => x.Success(#<text>function(e) { /*your event handler code*/ )}</text>))
)
<button type="submit">Ok</button>
}
I have a results list from a search in MVC which shows rows of data, with an action link.
#Html.ImageLink(Url.Content("~/Content/Images/view.png"), "New Window", "PoPupDetails", "QuickSearch", new { id = item.WardshipCaseID }, new { target = "_self" }, null)
This link calls a public ActionResult PoPupDetails(int id).
with return View("PopupDetails", model);
and a popup opens but it replaces the current form/page.
My question is how do i open a popup using my actino link keeping the same window. I want to close the popup and still see the list of results from my search.
Try this,
<input type="button" id="btnpopu" value="Open Modeless popup" onclick="ShowPopup();" />
<script type="text/javascript">
ShowPopup = function () {
window.open('URL', "PopupWindow", 'width=400px,height=400px,top=150,left=250');
}
</script>
I have an MVC 4 view that contains a partial view. The partial view is included in the main view as follows:
<div id="PartialView">
#Html.Partial("_PhotoList", #Model)
</div>
My partial view looks as follows:
#model ExchangeSite.Entities.EstateSaleSellerListing
<div style="width: 1300px; height: 300px; overflow: auto">
#foreach (var photo in #Model.ImageList)
{
<a href="javascript:DeletePhoto(#photo.ImageId);">
<img src="#Url.Action("GetPhoto", new { id = photo.ImageId })" alt="" title="Click on the image to remove it" width="250" height="190"/>
</a>
}
</div>
<script>
function DeletePhoto(imageId) {
var Url = "/EstateSaleSellerListing/DeletePhoto";
$.get(Url, { imageId: imageId }, function (data) {
$("#PartialView").html(data);
});
}
</script>
As you can see, when a user clicks on an image, the DeletePhoto() method is called. It makes a call to an action method named DeletePhoto on the named controller. The action method deletes the photo, generates a new list of photos and updates the partial view. Everything works except the partial view is never updated.
My controller code is as follows:
public ActionResult DeletePhoto(int imageId)
{
var photo = this._systemLogic.GetItem<Photo>(row => row.ImageId == imageId);
this._systemLogic.DeleteItem(photo);
EstateSaleSellerListing listing = new EstateSaleSellerListing();
GetPhotoList(listing);
return PartialView(listing);
}
The EstateSaleSellerListing entity has a list of photo objects that get displayed in the partial view.
I don't have enough experience to know why my partial view isn't updating when the action method returns.
Try to move your javascript to your main page and change
return PartialView(listing);
to
return PartialView("_PhotoList", listing);
Check your cache settings in jQuery (it looks like you're using jQuery by the syntax anyway). And I think your second parameter is a bit off (not assigning it to data)... Try this
<script>
function DeletePhoto(imageId) {
var Url = "/EstateSaleSellerListing/DeletePhoto";
$.get(Url, { cache: false, data: { imageId: imageId }}, function (data) {
$("#PartialView").html(data);
});
}
</script>
You could also have the controller method render the partial view to string if it is being loaded in a partial.
Controller...
model.PartialViewContent=PartialToString("Partials/SmallerPart",model);
return PartialView("Partials/LargerPart",model);
View
$("#PartialView").html(data.PartialViewContent);
Fyi, PartialToString is not built into mvc. I had to hack that together
I am using asp.net MVC2. i am facing a problem in state management of javascript contents.
i have got a image map in which on click on various part of image i am showing same page (redirect with parameters) with some parameter like : Secure/BodyWork?view=7
and on basis of value in parameter view i am showing various content on page. in that content i have got some checkboxes which i make checked and show it on left side in a div (checked one).
the issue is when i click on another part of image (of image map) it rediect me to same page with different "view=?" value but i loos state of my current divs(which contains name of checked check box of previous page).
my inherites line is like this:
Inherits="System.Web.Mvc.ViewPage<List<WBAC.Models.BodyWorkModel>>"
controller contains:
public ActionResult BodyWork(string view)
{
SecureModelService service = new SecureModelService();
return View(service.ListBodyWork(view));
}
[HttpPost]
public ActionResult BodyWork(BodyWorkModel model1)
{
//some code
}
i have tried with hidden field so in which i placed names of current page's checkbox but of course those loses value when i click on image map because of redirection of page to current page.
i have also tried with using ajax.beginform but its also not working because we are redirecting the page (to same page with different parameters like: view=3/view = 4) on click of image map.
please suggest me what should i change and how to do it.
Thanks
code in target div:
<div class="damageAreaMid" id="dvdamageAreaMid">
<% foreach (var item in Model)
{ %>
<div class="area">
<h2>
<%: item.Component %></h2>
<% Html.RenderPartial("~/Views/Shared/UCWorkArea.ascx", item.VehicleOption(item.ComponentID, item.Component));%>
</div>
<% } %>
</div>
You could use AJAX and refresh only the part of the page that needs to be refreshed.
public ActionResult BodyWork(string view)
{
SecureModelService service = new SecureModelService();
return View(service.ListBodyWork(view));
}
public ActionResult BodyWork(BodyWorkModel model)
{
//some code
return PartialView(model);
}
And in your view AJAXify the links on the image map:
$(function() {
$('#somecontainer a').click(function() {
$('#someresultcontainer').load(this.href);
return false;
});
});
ASP.NET MVC
I have one page Index.aspx where I'm loading two usercontrols into divs. This is working fine. For the moment the usercontrols just shows data and thats working fine. But now I want to add a delete function in the usercontrols and then refresh the div in the Index.aspx page. Is this possible?
Index.aspx
<!-- Panel One -->
<div id="panel1">
<img src="/Content/ajax-loader.gif" alt="Loading..." />
</div>
<script type="text/javascript">
$('#panel1').load('../Reports/ReportOne')
</script>
<!-- Panel Two -->
<div id="panel2">
<img src="/Content/ajax-loader.gif" alt="Loading..." />
</div>
<script type="text/javascript">
$('#panel2').load('../Reports/ReportTwo')
</script>
ReportOne.ascx and ReportTwo
Just listing some data with a foreach. Here I want to add a deletebutton for each item in the lists.
Make your "delete" action into something like this:
[AcceptVerbs(HttpVerbs.Post), ValidateAntiForgeryToken]
public ActionResult Delete(int id) {
try {
// do what ever here in deleting the record etc
// ...
return null;
} catch (Exception ex) {
TempData[TempDataKeys.ErrorMessage] = "Error in deleting: " + ex.Message;
return RedirectToAction("List");
}
}
In you ascx/aspx, create a jQuery method to wrap your ajax call to the controller:
function deleteRecord(recordId) {
if (confirm("Are you sure that you want to delete this record?")) {
var token = $("input[name='__RequestVerificationToken']")[0].value;
url = '<%= Url.Action("Delete", "MyController") %>';
$.post(
url,
{ id: recordId, __RequestVerificationToken: token },
function(data) {
if (!data == "") {
// success - reload/refresh panel control
$('#panel1').load('../Reports/ReportOne');
} else {
// failed - handle error
}
}
);
}
}
You will need to put your AntiForgeryToken appropriately so the script can access it - you only need 1 for the whole page. Your delete link should then call to the javascript, instead of to the action in the controller directly:
Delete
When the user clicks on the delete button inside the user control you could invoke an action that will delete the necessary information from the database and return a partial view refreshing the control. So put a delete link inside the control:
<%= Html.ActionLink("Delete", "DeleteReportOne", null, new { id = "deleteReportOne" }) %>
and then inside the main page register the click callback for this link:
$(function() {
$('#deleteReportOne').click(function() {
$('#panel1').load(this.href);
});
});
You may use JQuery UI tabs to add and remove the content from the page
JQuery UI Manipulate tabs
JQuery Tabs and ASP.NET MVC Partial Views
you need to modify your user controls