What is the most simple and fastest way to open a View as modal(popup) in other View?
I have Index view with button Create/Edit. When i press button i want to open a Create.cshtml or Edit.cshml Views as modal/popup, fill information, save and reload to Index View.
I have tried angular-bootstrap script to load external templateurl, but that is too slow for me (somewhy it takes up to 10s).
Is there some tool or way to do that fast and simple?
Thank you.
function newTask() {
var myModal = $('#myModal');
$.get('/Cloud_Customer_Events/Create/' + id, function (data) {
$('#mydiv2').html(data);
$('#myModal .modal-header .modal-title').html('Create Record');
$('#myModal').appendTo("body").modal('show');
});
}
Also, check the javascript files that are loading in your partial view for redundancy...
Related
I am creating a website of static pages in MVC5. I want to update the "content" div on the right side , based on the menu item clicked which is on the left side of the page without refreshing the whole page. I have used one partial view for the menu part and for each item in menu , I have created partial views .
You could use something like this where 'yourMenuItem', 'partialUrl' and 'rightPanel' refer to the menu option to be clicked, the URL of partial returning the content and the target div where content is to be inserted:
$('#yourMenuItem').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$.get("/partialUrl", function(data) {
$("#rightPanel").replaceWith(data);
});
});
You should probably use #(Url.Action("Action", "Controller")) to derive the partial URL.
I am having an issue with Bootstrap Modal, you know when we call a modal, the page where we called it is disabled (it turns gray) and you can only type/click on the modal right? On my part though, both the main page and the modal is disabled so I can't click nor close my modal after I called it. I can fix it by making the data-backdrop property to false but that removes the effect both on my modal and the page.
Default Modal:
data-backdrop = "false"
I think the reason for this is because the content of my modal is a partial view, and the modal is called from a partial view also. To help you imagine: I have 3 pages
1. Index.cshtml(main page)
2. SearchResult.cshtml (partial view)
3. Edit.cshtl (partial view)
Index is where my search criteria bar, when Go is clicked, SearchResult partial view is called at the center of the page, then when I click edit, the modal popup.
My assumption is that the backdrop also disables my SearchResult so my whole page become disabled. I am not really sure though. I hope you can help me figure this out. Thank you!
Do you have an example of your code? I am guessing without looking that your div that you are populating with the modal content is inside the div(s) with the rest of your page content. If this is the case, try moving the modal div out of any nested tags so that it stands on its own.
I.E.
`<div id="PageContent"></div>
<div id="ModalContent"></div>`
I put this code on my document ready , to catch when that element is adding to the page and I remove his css attribute position to relative:
$('body').on('DOMNodeInserted', '.modal-backdrop', function () {
$(this).css('position','relative');
});
i am new in mvc so like to ask 2 noob questions and those are
1) how to load partial view dynamically after postback. suppose i have a button in my main view and when user will click then i want to load a partial view dynamically after postback. i know how to load partial view dynamically using jquery but i want to know how can i load partial view after postback in main view without using jquery.
2) when we load any view dynamically by jquery then very easily we can capture the view rendered html and set or position that html in any where in my main view but i want to know how could i position or adding partial view html after postback. is it at all possible without using jquery?
in asp.net webform we can load user control dynamically after postback and also we can add that usercontrol any where in page without using jquery. the same kind of flexibility is there in mvc or is it restricted.
please give answer point wise with example or sample code. thanks
for your first question you can use different techniques, here is a sample
[HttpPost]
public ActionResult Foo()
{
ViewBag.ShowPartial = true;
return View();
}
in the view
#if (ViewBag.ShowPartial)
{
Html.Partial("_MyPartial");
}
for second question i suggest you read a little more about asp.net mvc, and postback means nothing in asp.net mvc, it is post request and get request so on, and you can easily add what ever you want to the view
one other sample
in the view
#if (Request.RequestType == "Post")
{
// do what ever you want
}
I am new to Kendo UI. I would like to be able to display a popup with the results from my controller.
My example is very simple. I have this data on my page.
Some text [Create]
When I click on [Create], a call in made to my controller. The controller will create a PDF file. Next, I would like to be able to display the pdf in a KendoUI Window.
I am getting hung up on how to pass info back to page so the KendoUi Window is aware of the PDF file name to display.
Thanks in advance for your tips.
Steve
MVC 4
KendoUI 2012.2.270
There are two basic approaches:
You create the window when page is loaded and have a function for changing the content and make it visible.
You create the window each time.
Assuming that you for 1. Then you have an HTML that is something like this
<div id="popup_window">
</div>
Create PDF
Then you define the window and the click bind for triggering the open as:
$("#popup_window").kendoWindow({
title :"PDF document",
visible :false
});
$("#show").click(function () {
$("#popup_window").html("<object id='pdf' data='doc.pdf' type='application/pdf'/>");
$("#popup_window").data("kendoWindow").open();
});
Where I create a kendoWindow but set it's visibility to not visible.
Then I bind a function to the click on the Create PDF message that sets the content to an HTML object where data attribute is the pdf document and then open by invoking kendoWindow open method.
I m using a Ajax Tab panel in my application.
There are 4 tabs on Left hand side and a partial view on right hand side.
In each of these tab I m displaying some data and there is a select link button on each tab.
when I click on any of the select link button I m filling the partial view with some information.
When this happens my view is completly loaded again.
A B C D
eg these are the tabs.
let us suppose that I m on tab B and now when I click on the select link button My view is completly loaded with information.
but the tab loose the focus at this point. I comes back to the default value.
so I want help on this
1) either I have to refresh only the partial view without loading the complete page
2) or I need to maintain active tab index value on click on select link button
Please help me with this problem
and provide me examples
jQuery Tabs - Load contents only when clicked
Here is the example which loading content of the tabs dynamically by Ajax. It is for PHP what you need to change is put controller/action instead of URL of the PHP page.
$.get("controller/action", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml");
or else instead of Ajax.ActionLink
use <a onclick="LoadTab(#item.ID)">Item #item.ID</a>
and jquery function to change the tab and load data dyanamicaly
function LoadTab(id){
//Change tab here Ex: $('#tabs').tabs('select', index);
$.get('ajax/test.html', {Id, id},function(data) {
$('#Partial_Controller_Name').html(data);
});
}
Write an ajax call on click event of tab and load the partial view in the container of the tab
This can be done using RjsResult class
if using mvc1 u can use RjsResult.cs
by this..you can update as many div you want in a page...
use this for implementation
public ActionResult Some_Method(){
RjsResult r = new RjsResult();
ViewData["SomeData"] = Some_Function();
r.update("DIV_id","PartialPagePath",ViewData,ControllerContext);
return r;
}
so when you click on somethink..this function will be implemnted and will refresh you div with tht partial
View part
<div id="DIV_id"></div>
you can update as many dv as you want with a single click :)