I was wondering if it is possible to modify a view HTML before sending it to the browser.
I wanted to create a custom tag compiler where i can insert a simple tag as <my-parsing-tag></my-parsing-tag> on the view and replace it for some specific HTML.
I'm already using OnActionExecuting and OnActionExecuted filters to execute some actions on the context (Change ViewBags, View names, Sessions, etc.), i also tried to do it there but i couldn't find the correct place to get the HTML, well i don't even know if it's possible to do so.
Is it possible or i would need to store my views HTML on the database to accomplish what i need ?
EDIT
As #Juan asked, why i need it:
I'm working with a call to action system where the user can place some specific modal campaigns on the page he wants just using those simple tags or selecting the page that will display it.
After that i will append the selected HTML to the view before sending it to the user. This system is intended for users that can't work editing the views since they don't work with HTML.
EDIT 2
After some research i have tried to implement a custom RazorView, the code is here with the Index View HTML, but now i have two problems:
The first one is that my Index View has some HTML that is coming from the database and is placed there using vars on my ViewModel and instead of the call to action HTML being placed at the end of my Index View, it's being placed before the ViewModel vars. The second problem is that the HTML is being duplicated instead of replaced. Here is an image of how the result looks like:
http://imgur.com/a/elul1
You could use an HtmlHelper extension for this:
http://tech.trailmax.info/2012/08/creating-custom-html-helper-in-mvc3/
I would suggest the following:
Define a container in your template (layout most likely) that will receive any content the user decides to "drop" into it via the admin panel.
You let the view know there is something to display via the ViewBag.
The view uses information you passed in order to render the desired content.
How it renders is where the HTMLHelper extensions come in. You could create an extension method which renders partial views based on the information you pass to it or maybe a set of extension methods that you call selectively based on the desired widget.
Related
I created a Sitefinity widget in MVC (2 views, a controller, and a model) and it works as expected.
Except for the edit menu after I drag the widget into the page. All of my fields in the edit view are text inputs, and I'm not sure how to affect this.
One of my fields should be a dropdown with values from an Enum - this enum lists the names of both of my views, and is used by the controller to pick which one I want to render. When I open the edit view for the widget, it defaults to the first value in my enum and everything renders properly, but I'd like this to be a dropdown instead of a text input requiring magic string knowledge on the user's part.
Another of my fields chooses a page to link to, which is used in the action attribute of a form inside my widget. This again works, but is simply a string text field, where I would like to use the built-in Sitefinity page selector many of the "native" widgets use, if possible.
So the short version is: Where/How do I affect what type of input shows up in the "edit" view of a widget once it's added to a page?
In terms of Sitefinity, the view, when you editing widget settings is "Widget designer".
Official documentation if you using Feather: https://docs.sitefinity.com/feather-create-custom-designer-views
Documentation for non-Feather users: https://docs.sitefinity.com/for-developers-create-a-simple-widget-designer
Simple example in your case if you want to use dropdown instead of input:
Create DesignerView.Simple.cshtml in your View/<ControllerName> folder
Add into this file: <select sf-model="properties.Content.PropertyValue"><option>abc</option><option>xyz</option></select> where Content is your property name
And it will render dropdown if you will edit this widget in backend.
Links:
List of available components for widget designer: https://docs.sitefinity.com/feather-client-components
Source code of built-in widgets: https://github.com/Sitefinity/feather-widgets It might help you if you want to know how this widgets built
The thing my employer asked for is a razor search form for items that has optional filters that show per filter value how many items there are. For example, filter option "fruits" has option "oranges" and behind "oranges" you can see the amount of oranges. Every time a filter value is chosen, the entire content must change and the number of items behind every filter value must change because the number of items that have that value and the value of the applied filter will be less. Per filter, it must be possible to pick several values. The data has to be gained from an ASP.NET API which I also have to make. It may not be directly from the database because we want to use this API functionality for other applications as well.
An example of what I mean can be seen on this website.
All of this has to be made in ASP.NET and with an ASP.NET API.
Let me know if any clarification is needed. Thanks in advance.
Break out the dynamic content in a partial view. And create an action method on the server that takes filter parameters as input and then returns the partial view with the results. On page load use AJAX to pass the selected filter parameters and load the resulting content as a partial view. ON change of filter call the AJAX method again. Whatever HTML content is returned by the partial view, place it on the page.
I am new to MVC and i was trying to covert one of my webform project.
I have a request page, depending on drop down i select, controls get populated.
There are 10 request types, so i considered using partial view. I will make an ajax request on select change event, and depending on what is selected, i will return the partial view, but when i submit the main page, how will i retrieve the model for partial view, can i retrieve model separately for main page and partial page.
Yu have no way to pass a model from the client side to the server for rendering a partial view. So, no, that's not possible.
As you want to deliver a different partial view depending on the selected item, you need to pass this information to the browser, so that it can decide which action has to invoke to render the view correspondeing to the selected item. To do so, you can add this information as the value of each element int the drop down list. This value can be something as simple as an id or as complex as a whole url with parameters which invoke the required view. (If you choose the url option, you can render it using the Url.Action url helper extension).
Then, in the code that handles the change event, you can recover the value of the selected item, and use it as a parameter for making the ajax call that will render the required partial view. (For example, if it's the url, you can use jQuery.get() or any of the other jQuery ajax methods with that url).
The ideal situation is that you can render the partial view without depending on the previous rednering of the main view. I.e. the ideal is that you can build the model for the partial by using the action and parameters received in the ajax call.
But, if you need some information that must be generated when rendering the main view, you can use can use TempData to store it when rendering the main view, and to retrieve it when the partial is rendered. (TempData or Session depenging on what yu exactly want to do).
I am working on a project which has a requirement to build "pages" on the fly. A page can consist of various controls like textboxes, checkbox etc. Currently when the user wants to add a new textbox I make a ajax request and render partial view and return the HTML and show it on client side. This works but I also want to handle the data properly when these dynamic controls are filled up by user. In a way if I am not wrong I need to be able to make array of HTML controls. Now if we give static List to our view and generate textboxes using Html.TextboxFor we see that the name generated is something:
[0].FruitName
[1].FruitName
[2].FruitName
How do I handle this index part when making a Jquery Ajax request so that I always get the correct indexes and render it on client.
If anybody has any better solution than making ajax request then also please let me know. I need to handle the dynamic rendering of HTML controls and also access their values properly when posted back to server.
Take a look at Non-Sequential Indices at http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx.
He introduced a helper method to generate it as well.
Also, I think you can just pass an index with your ajax call which then gets passed from Controller to your partial view and use it to generate a proper indexed TextBox.
Update:
I've asked a very similar question at Submit javascript dynamically added elements to controller method like Stackoverflow
i have an Ajax ActionLink which normally just returns a PartialView (which is just a UserControl ascx file) however, my needs have changed and i want to return another PartialView (so a total of two PartialViews) that occupy different areas of my page... of course i can't call " return PartialView("UserControl.ascx") " twice in a row consecutivelly... so my question is what would be an elegant work around for this?
how can i return two PartialViews WITHOUT wrapping these two PartialViews up in a larger parent view? i hesitate to do this because both items are in a different part of the html table which would require me to include practically the entire page in the parent view due to the structure of the table, and in this case lots of html data unnecessarily would be sent to the browser at each request - defeating the purpose of an ajax call/partial update (correct me if i'm wrong).
Im sorry I misread, i thought you wanted to call an action method statically. If you want to update 2 parts with one click then I dont really now how you would do it with the included apis. What you could do is create a little javascript (jquery!) that takes over the link´s click, and then have the script load the render page with ajax.
I´ll post an example in a few minutes :P
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#TheLink").click(){
$("#PlaceToUpdate1").load("/Controller/Method/View1");
$("#PlaceToUpdat2").load("/Controller/Method/View2");
}
});
});
</script>
im not sure if that will work exactly like that (no compiler, just top of my head) but its something like that. Of course the link should be a dummy link that doesnt do anything, since the script is the one actually doing it (though you can intercept the links methods if you send back a false or something like that)
You could manually construct the partial views in HTML helper methods. However, the feasibility of that approach depends on whether or not the partial views will be reused in other pages. I build a data grid control from scratch using HTML helper methods. Some of my pages have three or four of these data grids managed by a jQuery accordion control to reduce the screen footprint. I chose building an HTML helper for a number of reasons. First, I expected to use this control throughout my applications. Second, I didn't want to burden my views with a bunch of conditional logic. Finally, I wanted to be able to change the grid's configuration (including the model) within the view, so I wouldn't have to recompile every time I changed it. The grid supports both LINQ-to-SQL models and user-defined classes (using reflection), has a built-in pager control and a search mechanism that supports multiple search fields in a grid. I also set up the columns so that they can either display formatted text, link to a controller action or hold a mailto: link. Within the grid itself, you can define the model to populate the grid, optionally set the columns to display, specify the action and controller for creates, and specify a JavaScript function for deletes (because I use the jQuery dialog plugin for confirmation messages). All these changes are managed in the view itself.
Learning how to leverage HTML helper methods gives you the closest thing to ASP.NET server controls that MVC provides.