I am having an issue with a MVC4 app I have a view that has two partial view on it.
My main view is opening inside the popup. My screen open successfully with 2 partial view on a popup window.
Upper part of my view contains data entry/edit( partial view) and bottom part is display ( partial view).
Display part partial view contains web grid and eac a hyperlink ( edit and delete ) . when user click on edit , application should load the entry/edit view inside the same page.
My application should load entry/edit partial view on the same window .
Please suggest how to achieve this.
see the below code i am using on display view.
---------------------------------------------------------- First Partial view---
#model IEnumerable<Peabody.LMS.WebApp.ViewModels.AUTenement.TenementTypeLookupViewModel>
<div id="gridContent">
#{
var grid = new WebGrid(Model, defaultSort: "TypeCode", rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");
}
#grid.GetHtml(tableStyle: "table",mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Previous",
nextText: "Next >",
lastText: "Last >>",
footerStyle: "foot-grid",
columns:
grid.Columns(
grid.Column("TypeCode",header:"TenementType Code"),
grid.Column("TypeDescription", header: "Tenement Description"),
grid.Column("Country", header: "Country"),
grid.Column("State", header: "State"),
grid.Column("LastModifiedBy", header: "Last Modified By"),
grid.Column("LastModifiedOn", header: "Modified On"),
grid.Column("Actions", "",#<a href='/TenementTypeLookup/LoadHeaderEdit/#item.TypeCode' ><img src="~/Images/edit-icon.png" alt='Edit' /></a>, style: "width:auto"),
grid.Column("", "",#<a href='/TenementTypeLookup/Delete/#item.TypeCode' ><img src="~/Images/Delete-icon.png" alt='Edit' /></a>, style: "width:auto")
))
</div>
------------------------------
the best way I have found is to load the partial with an ajax call.
$(document).on('click', '.btnDisplay', function(){
$.ajax({
type: "POST",
url: '#Url.Action("Action", "Controller")',
data: {
Field1: 'field1',
Field2: 'field2'
}
success: function (result) {
$('.targetDiv').html(result);
}
});
then on your controller
[HttpPost]
public PartialViewResult Action(string Field1, string Field2){
var model = //populate model from database
return PartialView("_PartialName", model);
}
so the ajax call will call the controller and pass whatever parameters you want. Then you can build the model and return the partial view. In the success of the ajax call it will take the returned partial view and put them into the whatever your target it (a div with class .targetDiv in this case)
Related
I have the following problem: So I built a search function for an OrderId in Nopcommerce and I want to update two values (Buyer Name) and (Purchase Reason) in a table in my main view instead of how it is now, where I render them in a partial view but it appears on the main page.
Example:
How it is at the moment after I click search button :
My controller that renders the partial view:
And here:Part of my SearchResult.cshtml partial view where the values appear
I want it to appear somewhere here (My startview.cshtml as you can see I tried some things but nothing seems to work, Ill delete those)
Thank you in advance!
You can achieve this using ajax call.
var request = {
OrderId: $('#OrderId').val(),
}
$.ajax({
url: "/Home/DisplayBuyerName",
type: "GET",
data: request,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: function (data) {
$("#SearchResult").html('').html(data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
return false;
}
});
html:
<div id="SearchResult"> </div>
So now your partial view is placed in SearchResult div.
I have a drop down list (Cities) and on selection it should be able to bind a Grid View in MVC 5
i am able to bind the drop down list and grid view but unable to handle the select event of Drop Down list. I dont know how to proceed on this I dont want to use Jquery. Below is my code
// BELOW IS THE DROP DOWN LIST CODE
#using (Html.BeginForm("BindGridView", "FacebookConfig", FormMethod.Post, new { id = "Id" }))
{
#Html.DropDownList("Cities")
}
// ON SELECTION OF ABOVE I SHOULD BE ABLE TO BIND THE BELOW GRID VIEW
#if (Model != null)
{
foreach (var item in Model)
{
#Html.DisplayFor(modelItem => item.Keywords)
#Html.ActionLink("Edit", "Edit", new { id = item.Id })
#Html.ActionLink("Delete", "Delete", new { id = item.Id })
// BELOW IS THE CODE IN CONTROLLER
public ActionResult Index()
{
var cities = So.BL.City.GetCities();
ViewBag.Cities = new SelectList(cities, "Id", "Name");
return View();
}
[HttpPost]
public ActionResult BindGridView(int id)
{
var filter = So.BL.FacebookFilter.SelectFBApprovalFilters(id);
return View(filter);
}
If you want to perform an operation on dropdown on change event you must go for javascript/jquery for handling the element events. To satisfy your requirement you may do as,
Create a <div> to hold the new grid view to be created with the id to select.
Create a partial view that generate the grid view.
Create a function either in jquery/javascript for dropdown list on change event.
From the function call an action method using ajax.
Create an action method which would do what ever the functionality you want to do and return the partial view with the model required for generating the grid view.
Finally on success method of ajax call, write the output response to the inner html of the <div>.
If definitely not going for jquery or javascript then do a post back and from the selected dropdown value in the post method fetch the data for grid view and bind it to the grid. Note here the form submission will not occur on dropdown selection must use a submit button. Also show the grid based Model if not null.
Choose which one you likely to adopt.
I have a partialview "selectUser". On this partial view a user can search for other users. The user id will be stored in a hidden field or as a var on my view. I need to use this partial view in many places. Lets say I need to return the id of the selected user on the close event of my dialog. My question is, how do I make this partial view, loaded as a modal dialog with jquery ui, to retrun the selected value to its parent view? Is there a way to access the value directly from the parent view?
I think I follow what you are needing now. So on your button click you do an ajax call back to the server and include the destination field name in the call
$.ajax({
url: "#(Url.Action("Action", "Controller"))",
type: "POST",
cache: false,
async: true,
data: { destination: 'fieldName' },
success: function (result) {
$(".Content").html(result);
AttachScript();
Dialog.load();
}
});
On your controller send that field to the partial view through your view model or viewbag and on the partial view put that field name in a hidden field. then in your button click you should be able to do something like this (untested)
function AttachScript(){
$('.btnSubmit').on('click', function(){
var data = $('.sharedField').val();
$($('.HiddenField').val()).val(data);
});
}
which will set the value of whatever field is named in your hidden field to the data. Hopefully this helps.
For an implementation of Magnific Popup, I need to pass a post id to the ajax settings. The post id is stored in a data attribute of the element to which Magnific Popup is bound. I would like this to work:
html element:
<a data-id="412">Clicke me</a>
Javascript:
$('.element a').magnificPopup({
type: 'ajax',
ajax: {
settings: {
url: php_array.admin_ajax,
type: 'POST',
data: ({
action:'theme_post_example',
id: postId
})
}
}
});
Where postId is read from the data attribute.
Thanks in advance.
$('.element a').magnificPopup({
callbacks: {
elementParse: function(item){
postData = {
action :'theme_post_example',
id : $(item.el[0]).attr('data-id')
}
var mp = $.magnificPopup.instance;
mp.st.ajax.settings.data = postData;
}
},
type: 'ajax',
ajax: {
settings: {
url: php_array.admin_ajax,
type: 'POST'
}
}
});
Here is how to do it:
html:
<a class="modal" data-id="412" data-action="theme_post_example">Click me</a>
jquery:
$('a.modal').magnificPopup({
type: 'ajax',
ajax: {
settings: {
url : php_array.admin_ajax,
dataType : 'json'
}
},
callbacks: {
elementParse: function() {
this.st.ajax.settings.data = {
action : this.st.el.attr('data-action'),
id : this.st.el.attr('data-id')
}
}
},
parseAjax: function( response )
{
response.data = response.data.html;
}
});
php
function theme_post_example()
{
$id = isset( $_GET['id'] ) ? $_GET['id'] : false;
$html = '<div class="white-popup mfp-with-anim">';
/**
* generate your $html code here ...
*/
$html .= '</div>';
echo json_encode( array( "html" => $html ) );
die();
}
As this answer was the original question regarding inserting data into Magnific's ajax call, I'll post this here.
After many hours of trying to figure this out, you should know that if you're using a gallery with the ability to move between gallery items without closing the popup, using elementParse to set your AJAX data will fail when you visit an item after already viewing it (while the popup is still open).
This is because elementParse is wrapped up in a check that it makes detect if an item has already been 'parsed'. Here's a small explanation as to what happens:
Open gallery at item index 2.
Item has not been parsed yet, so it sets the parsed flag to true and runs the elementParse callback (in that order). Your callback sets the ajax options to fetch this item's data, all is well.
Move (right) to item index 3.
Same as above. The item has not been parsed, so it runs the callback. Your callback sets the data. It works.
Move (left) back to item index 2.
This time the item has been parsed. It skips re-parsing the item's element for assumed potential performance reasons.Your callback is not executed. Magnific's ajax data settings will remain the same as if it were item index 3.
The AJAX call is executed with the old settings, it returns with item index 3's data instead, which is rendered to the user. Magnific will believe it is on index 2, but it is rendering index 3's data.
To resolve this, you need to hook onto a callback which is always executed pre-ajax call, like beforeChange.
The main difference is that the current item isn't passed through into the callback. Fortunately, at this point, magnific has updated their pointers to the correct index. You need to fetch the current item's element by using:
var data = {}; // Your key-value data object for jQuery's $.ajax call.
// For non-closures, you can reference mfp's instance using
// $.magnificPopup.instance instead of 'this'.
// e.g.
// var mfp = $.magnificPopup.instance;
// var itemElement = mfp.items[mfp.index].el;
var itemElement = this.items[this.index].el;
// Set the ajax data settings directly.
if(typeof this.st.ajax.settings !== 'object') {
this.st.ajax.settings = {};
}
this.st.ajax.settings.data = data;
This answer can also be used as a suitable alternative to the currently highest voted, as it will work either way.
You may use open public method to open popup dynamically http://dimsemenov.com/plugins/magnific-popup/documentation.html#public_methods
postId = $(this).attr('data-id')
$(this) retrieve the current element (the link you clicked on), and attr the value of the specified attribute.
I've a function in controller of extjs4.0 MVC it called on button
which is in view page but when I open another tab then this function not called
on button
Kindly help me in this matter
//------------- Code
init: function() {
var controller = this;
this.control({
'leftPanel button[action=reset]': {
click: this.resetForm
},'leftPanel button[action=search]' : {
click: this.searchForm
}
})
}
these 2 function will not call again if open another tab on my site
Kindly help me in this matter
Thanks
actually the fields are in view page like
this
buttons: [{
text: 'Reset Filter',
name :'btnReset',
id:'btnReset',
action:'reset'
},{
text: 'Perform Search',
name:'btnSearch',
id:'btnSearch',
action:'search'
}
]
you can see in config option defined
the name of the function 'search , rest' which is defined in controller of the page (as I posted on my question). this function works
properly when page load and if we not perform any action of this page where these function called but when I' opening a tab (by Using Ajax Request) after that the above function not called no error messages appear.
hopefully you can understand the problem