asp.net mvc trigger jquery function - c#

I have a quick question nothing to intense I hope.
In a crud template, when someone adds a new record into the database you can have an ajax form send the data off to the server then get redirected to the list of all the records in the database.
So the flow of events would be:
ViewResult Edit => Edit Razor View => ActionResult Edit => ViewResult AllRecords => AllRecords Razor View
I know you can have JQuery animate the introduction of the new record into the list.
I'm guessing you need to pass the newly added item to the Controller then get the Controller to pass that information to JQuery but what would be in the razor view to do this kind of thing.
So basically how do you get JQuery to animate the introduction of the new record into the list?

If I understand correctly, you want to have the item shown in the list after it has been added, but without doing a redirect.
If this is the case, you have two options.
When you submit the form and send the data to the controller's action method, you can either return JSON w/ the information on the new record, which would include the newly added Id. Then in the AJAX callback you would parse the returned JSON and feed it to some kind of template to populate the list.
Or much easier would be to send the information to the controller's action method, and once the record is added, pass that new record to a Razor view that has been set up to specifically render one row. You then return this rendered HTML in the AJAX call back and simply insert it to the end of the list.
Approach #2 is easier, but is not very reusable.

Related

Stepper form data

I am new to dotnet core mvc. So I am asking a suggestion. I have 2 stepper form. I need to get data from this two form , do some validation and finally save this to db. How can I make view and get data from view to controller ? Should I make two view page and two controller ? Or one will be enough ?
Way to achieve this feature
You can create two separate view pages and two corresponding action methods in the controller (one for each step of the form). You can use TempData or Session to store data. Then, in the last action method, you can perform all the necessary validations and save the data to your database. Alternatively, you can use a single view page and use javascript to hide/show different parts of the form based on the current step. Finally, you can use a single action method in the controller to handle the submission and processing of the entire form data.
Tell me if this helps :)

How to keep dropdown list from one view to another

in my controller, I have Create actions for Get and Post.
On Get action, I load dropdown data list and show it in view, while I keep only value of selected item. Then I click on submit and call Post action of Create and logic is finished.
But when I call Create action, and model isn't valid, I go back to Get. And here starts the problem, because my dropdown data no longer exists. So I can on my Create action, when model is not valid, again load dropdown data from database, but my idea is to keep and move dropdown data list from Get to Post action, like I sometimes did with "hidden input id". But i have no idea what html tag or helper use for data List.
Something like:
<Select type="hidden" value="#Model.DataList">
I think that transfert the DropDownlist elements between get and post actions is not the right approach. It could make the server calls too long, especially if you have several elements.
I suggest you to create a cache (session cache for example) of your DropDownList items and use it during the get action.
With this system, when you have an invalid model, the get will reload the data without calling the database.

Is there any straight way to return the whole items of a Kendo DropdownlistFor using a single POST?

I'm using a kendo dropdownlistFor and populate it by items that a user is able to add. and I'm using a modal dialog which sends an ajax POST to the controller. Now my question comes forward.
Is there any straight way (not using HiddenFor, or tricky Js or Jq stuffs. instead using MVC or Kendo functions) to pass the whole items of this DropdownList to the controller?
What I have now, is a kendo dropdownlistfor and a property of List. the Post returns, of course, the selected item id.
Thanks in advance for any suggestion.
I am currently trying to do a similar thing with my project. As far as I have been able to discover there is no way to do this without having a JS function, ticket ongoing. However your case may be possible if I understand it correctly. The user passes in items to your dropdown correct? So if you were to save those items into a List and then pass that list into the controller it should work correctly. If you could give some of your code or a picture of your UI I may be able to give you a bit more direction. Hope this helps!

How to return an object from controller to View which may not be model

I am very new to MVC and I am not too conversant with the best practices here. I am facing a design issue which may be common or uncommon to newbies like me. My problem is the following:
I have a page with two parts in it.
Grid Control (with Employee basic info in it)
Employee Details (When someone clicks on Grid row, it loads all the details about the employee)
I am using KendoGrid and it is getting all its data from an ActionMethod from my controller.
Now, when I click on the row, I have the following options:
I call some ActionMethod in Controller and return all the Details
Should I use partial View with a separate model so that ActionMethod in response calls RenderPartialView()?
Should I NOT create a partial View, have Actionmethod return JSON and parse it in the Model?
3.1 If I go for this option then would the JSON be part of model?
3.2 If it is not going to be part of model, how can I use JSON to render the View?
Or probably I am missing something basic here?
Yes you can use action method returning JsonResult. what needs to be done is keep the uielements you need to show on the click of grid row in the page itself. initiate a ajax call to the action method and on success update the values of the UI elements from the values received in JSON and make the entire DIV as visible which holds the total information.
Instead of passing entire HTML over the network I think you can opt for json.
An example you can find at following location
example

Controller calling itself and passing a value

How to pass data from the controller to itself?
Consider this example:
I have a page that consists of two parts: (1) a simple html form with a couple of text boxes and a submit button and (2) a table that is updated when the button from part (1) is pressed. When it happens, the data from the form has to be appended to the end of the table.
As I see it, there should exist a List of objects. Every time the button is pressed, the controller is called with two parameters: the old list of objects and textbox values. Then, the controller generates the object, adds it to the list and passes the new list to the view. The view is rendered with the new data and rows are successfully added to the table.
However, that requires reloading of the page and that feels kinda wrong.
The problem is, that there is no static object that can contain the list permanently, or at least that exists during these controller-self-calls. If there was such, I would not have to pass the whole list (which, as I said, I can't even do) but just new textbox values.
I have heard that partial views can solve the problem, but I can't see how.
What can I do?
For starters, as you said you'd like to achieve this without javascript, I see no way of avoiding: reloading of the page and that feels kinda wrong.
Not sure as well how partial views will make things work since they're rendered from your main view and require the same or part of your model, so you'll need to have that data there.
You have to get the information back from the controller, and the controller must get this information somehow so as I see it, these are your options:
Keep part (2) inside your form, thus making both parts available when you hit the controller. Model will get populated with the values you need and then the data is available for you when you're back at the View.
Keep a hidden input field inside part (1) containing the data you require to create the list. It's similar in concept to option #1 but I don't like this method too much, you'll have to do some parsing on that input field and this is not very elegant.
You could also try use Session or database but I think the latter is an overkill and a hit on performance so I wouldn't go with that.
If you don't have a database backing the form data, you could use Session data to hold the List.
In the controller, do something like this:
[HttpPost]
public ActionResult AddToList(object newObject)
{
var list = Sesssion["List"] as List<Object>;
if (list == null) {
list = new List<Object>();
Session["List"] = list;
}
list.add(newObject);
return View(list); // Assuming the view is a strong-typed view with List<Object> as model
}
As for partial views, they do not alone solve the problem of reloading the page. The solve the problem of a reusable, self-containing component of the page. If you don't like the reload of the page, you can use partial views together with Ajax calls though, in order to refetch the table whenever a new item is added. Here is an example

Categories

Resources