I have a Car View (List.cshtml) that shows my Car´s list... I´d like to add a button/link:
"Add car..."
That button must open my View (Create.cshtml) in a JQuery Modal UI...
How can I do that?
here you go:
demo: http://demo.aspnetawesome.com/Meals/Index
download it from here: http://awesome.codeplex.com
Create/Edit in jquery UI dialog (popup)
delete with confirm dialog (ui dialog)
the list is just a simple table with a foreach
Related
I have an separate Add button (neither on toolbar, nor on grid) and I want to open a popup window (having some fields) after clicking this button in order to create a new record. I have a look at the Kendo Demo pages, but all the samples use grid's or toolbar's Create button. Instead of them, a need a sample with a separate button. Any sample please?
Update: I want to create a listview as shown below instead of grid:
If you call dataGrid.addRow() method and edit mode is set to "popup", Popup window will be displayed.
Look at this dojo
Is there a way to mimic the function of Mozilla Firefox tab function to jQuery Tabs that, when there are multiple of tabs, it adds a next button to view next tab after the last displayed tab.
I want to add this next button(encircled), to the jQuery tabs UI functionality. Also, if possible, to add the animation on the menu tab to move tabs as next/previous button is clicked, like on the said browser.
Thanks!
This could help. You will need custom logic.
This CSS trick can also help out. You can tweak the logic for the placement of the next button and you are good to go.
I'm following the modal dialog example on jQuery UI website but not having any luck getting the dialog to be displayed. The example creates and opens the dialog from a button-cllick but I'm trying to launch it from a click on a TD element. Is that possible?
Assume that your td element has clickable_td id and also your dialog block has dialog id, So you can attach click event handler for td emelent with the on() function object and show your dialog block with dialog() function object while clicks captured like this:
$('#clickable_td').on('click',function(){$('#dialog').dialog();});
NOTE: The default jQuery z-index is 100, if your layouts' elements have higher value of it, try this instead:
$('#clickable_td').on('click',function(){$('#dialog').dialog();$('div.ui-front').removeClass('ui-front').css({zIndex: "10000"})});
This code basically creates a block UI. Instead of using jquery block UI dialog, you can use jquery blockUI plugin. You can refer the link to understand the code.
http://www.malsup.com/jquery/block/#demos
In the below example #yourtd_id is the id of your td and #your_div is the div which you want to make as modal. When the td is clicked .blockUI is a class which display your_div on the screen. Now it like a modal dialog. To come out of the modal dialog insert a button on #your_div and give id as #cancel_btn. When the #cancel_btn is clicked .unblockUI() unblocks the UI i.e unblocks the modal dialog.
$(document).ready(function() {
$('#yourtd_id').click(function() {
$.blockUI({ message: $('#your_div') });
//keep a cancel button on #your_div. for eg: consider its id as #cancel_btn
});
$('#cancel_btn').click(function(){
$.unblockUI();
});
});
This will work.I hope this will help you.
I have a ASP.net MVC application. On one page I have a button and when user clicks on it I need to display some information on a pop up window. How can I do that in ASP.NET MVC? What do I use and where do I write the code for pop window? In the controller? Some java script?
Thank you!!
You can display messages with javascript. The content of the message can be set in the markup or by your Controller as a Model property. You have a few display options:
Use the alert() function, which will display a native browser dialog
Display a styled modal dialog (E.g. jQuery UI dialog)
Display a styled div (E.g. jQuery UI Message - shameless plug, this one of my open source projects)
The alert function isn't very pretty, but it's the simplest. I typically go with a modal dialog or a styled div, depending on the UI requirements.
If the information you want to display in a pop up is dynamic (i.e you need some c# logic to run) then I'd suggest putting that logic in a controller and have the corresponding view be the pop up itself. You can stick some JavaScript at the top of the view to launch the popup on load.
The page with the button trigger can call that controller and pass any data needed. To make it smooth maybe make the trigger use Ajax.
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 :)