Form in form - solve differently? - ajax

I have situation like this:
form with textbox, two dropdowns and grid with selected values
form with search textbox, which needs to know values selected in dropdowns in above form to do searching
First form is for saving whole data to database.
Second form is for searching in database, showing searched values and adding selected values to grid in first form.
It could work if form in form were allowed, but it is not.
I have tried to add hidden values for selected ids in this dropdowns but those values are not binded.
Any ideas?
EDIT:
I have solved that problem with code below for search part of the form:
Javascript:
$('#wsSearch').click(function(e) {
$.ajax({
type: "POST",
url: '#Url.Action("Search", "Definition")',
data: {
word: $('#wsSearchWord').val(),
firstId: $('#wsFirstDropdown').val(),
secondId: $('#wsSecondDropdown').val()
},
success: function(data) {
$('#wsSearchResultContainer').html(data);
}
});
e.preventDefault();
});
Controller:
[HttpPost]
public virtual PartialViewResult Search(string word, int firstId, int secondId)
{
var model = this.service.Search(word, firstId, secondId);
return PartialView("_SearchResult", model.ToList());
}

I'm afraid, but I guess you won't get this without JavaScript. With JavaScript, you could bind on submit events of the search form and then fetch the data from the first form or you could bind on change events of the dropdowns and then change the search form.

Related

Show Command Buttons Conditionally on hierarchy telerik grid

I want to show a custom command button in a telerik grid hierachy depending on the master-row data
Hi, I have a telerik hierarchy grid data, and I want to show a custom command button in the detail row, depending on the master-row data.
in the detail template grid, i call the ShowIfSubmitted() method.
command.Custom("Void").Text("Void").Click("VoidDeal").Visible("ShowIfSubmitted");
In the function:
function ShowIfSubmitted(dataItem) {
}
I only can access to the model data in the detail row.
But I want to access de master-row data, to check if the value of the property in the model meets the criteria to hide the button in the detail row.
My workaround was to extract the parent row instance model in order to get its id, with this field I created and ajax call to the DB to get all the info that I needed. Actually, with the "arguments" object, I could have extracted the id value.
Basically I just did this:
function ShowIfSubmitted(dataItem) {
var deal_status_id = 0;
$.ajax({
async: false,
data: { dealId: dataItem.Deal_Number },
url: '#Url.Action("action", "controller")',
success: function (data) {
deal_status_id = data;
}
})
return deal_status_id == submitted_status;
}
In the controller action is where I call the service.

How to present partial view in jQuery dialog without navigating to another page

I have two controllers, A and B. A is responsible for representing some data in a grid view. Assume I have a button called "ShowInfo" which brings additional info about the selected record. And to retrieve the info about the selected record is the job of controller B.
The info is so little that it'd take just a tiny place in the corner if I navigate to another view. So I thought I'd rather bring that info inside a jQuery dialog without navigating to anywhere. But I'm a bit confused as to how to do it.
Here's the action method in controller B that is responsible for providing that info in a partial view.
public class BController:Controller{
public ActionResult GetInfo(int recordID){
RecordInfo info=RecordsRepository.GetRecordInfoById(recordID);
return PartialView(viewName:"RecordInfo",model:info);
}
}
I don't know, maybe the action method needs to different. Maybe I should return JSON instead of Partial view, but anyway, how do I do that?
You can use the jquery .get or .load methods. For example, to replace the contents of <div id="SomeElement"></div> with the partial view returned by GetInfo()
$('#ShowInfo').click(function() {
var url = '#Url.Action("GetInfo", "B")';
var ID = someValue; // the value to pass to the GetInfo method
$.get(url, { recordID: ID }, function(data) {
$('#someElement').html(data);
});
});
You can use Jquery ajax to achieve this.
Wrtire jquery ajax on the view page and call the partial view action from ajax.
receive the result in html format and replace it in the dialog box.
Put following code on main view page(ShowInfo button page)
$(document).ready(function(){
$("#ShowInfo").on("click",function(){ ///give id to showinfo button and attr data-id is record id
var id=$(this).attr("data-id");
$.ajax({
type: "POST",
url: "B/GetInfo",
data: JSON.stringify({ recordID: id }),
dataType: "html",
success: function (html)
{
////put the html response in dialog box
}
});
})
});

Update mysql table with a click of dropdownlist in the view

Can someone please help me i want to update a database record by using the dropdownlistbox,
so when i select an option from the dropdown the database is updated with that value for that record, without having to click a submit button using codeigniter.
I know the best way to go about this is with AJAX
Yeah AJAX can make it work, and doing it with jQuery can make it a lot easier. You can add an event listener to your dropdown list, listening to a change in its value:
$("#the-dropdown-list").change(function() {
var value = $(this).attr("value");
$.ajax({
url: "path/to/controller/action/",
type: "POST",
data: {value: value},
success: function() {
// whatever you want to do after
}
});
});
This will detect a change in the dropdown list value, and then send it to the controller action given in url in $.ajax object. After that you can just update the database record like you would usually do. In the controller, the new value can be obtained using $_POST['value'], since we defined type to be POST and the different values to be passed to controller action are in the data.

Auto Complete for Generic list MVC 3

I have a Generic list in my Model class. I want to have a textbox with autocomplete in my view which fills data from the generic list. How can I do this?.
For this you will need
Function on server side which will return list of matching data and will accept string entered by the user.
Something like this
public JsonResult AutoComplete(string input)
{
//Your code goes here
}
In the View, for the text box you need to bind KeyDown event. You can take help of jQuery for this. On key down handler you will make an Ajax call to the function you have defined in the Controller. Some thing like this:
$.ajax({
url: '#Url.Action("AutoComplete", "ControllerName")',
data: 'input=' + sampleInput,
success: function (data) {
//Show the UL drop down
},
error: function (data) {
// Show Error
}
});
In response you will get list of strings, which you will need to bind to some html element like "UI". Once done, display this UI with proper CSS below the text box. Using jQuery, you can retrieve the pixel location of text box too.
You can not use Asp.Net Auto Complete box in your project as you are developing app in MVC (no viewstate). I hope you get the idea.
You can use JQuery Autocomplate.
To fill the list, you can populate the data from you object.
I can't remember the exact Razor syntax, but you can refer to this:
//data is your Model object of type List<String>
var listString = [#foreach(x in data) { '#x',}];
$( "#dataList" ).autocomplete({
source: listString
});
<input id="dataList">
JQuery Autocomplte
http://jqueryui.com/demos/autocomplete/
This is client side auto complete, I can provide server side if you need.

JQuery - which form was submitted?

I have a page of products and for each of them, I want to have a form that uses AJAX to update the session. I've done this bit - just providing background.
I use the product's ID to create a different form class and name for each form, so each form is called something like this_form_name_567 and the next would be this_form_name_568 and so on.
There is a submit button per form. I'm having trouble figuring out
Which event is best to use so that the correct form will be identified when a submit button is clicked?
Once clicked, how to then make sure the correct value is taken from a hidden field (unique ID) within the submitted form so that I can populate a line of code such as:
$.post("compare_response.php", {compare_this: $("#compare_this").val()}, function(data){
}
You can use the .closest tree traversal method to get the form in which the button of interest is nested:
$("input[type=submit]").click(function() {
alert($(this).closest("form").attr("id"));
});
or even simpler, just get the element's form property :)
$("input[type=submit]").click(function() {
alert(this.form.id);
});
You can try it out here.
You can get the form you are submitting like this:
$('form').submit(function() {
var yourForm = $(this);
var hiddenValue = $(this).find('input[type=hidden]').val();
});
Of course you can get the hidden value differently, or if you have more than one hidden you'll have to give a little more information about it.

Resources