I have a function that updates a div with raw HTML. However, the raw HTML is in another .CSHTML document.
My function is:
function Demo(){
$('#ContainerDiv').html('#Html.Partial("MyPartialView")');
}
For some reason, whenever I include my partial view within the function, my console shows that it is unable to locate the document.
As soon as I remove the #Html.PartialView("MyPartialView") and include it in the body of the document, it loads fine.
Any ideas on why this would not be working, or a better way of doing this?
Thanks,
Mark
Your partial view probably contains line breaks, which results in multi-line string literals, which aren't valid in js. I see two options: Render the partial view in a hidden div when the page loads and move it to #ContainerDiv when you need to, or use ajax to get the content later.
You could call an action and then populate a container with the resulting HTML.
For example:
Action:
public PartialViewResult GetPartial() {
return PartialView("MyPartialView");
}
JQuery:
$.get('#Url.Action("GetPartial")').done(function(response){
$('#ContainerDiv').html(response)
}
I've always used .load() and the url to the partial view. Like so:
function Demo(){
$('#ContainerDiv').load('#Html.Raw(Url.Action("MyPartialView"))');
}
Edit: Forgot to change .html() to .load()
Related
I am building a .NET MVC 5 application on back-end and Angularjs on front-end.
I am loading .cshtml views in a div containerOne on a parent .cshtml page with ui.router and everything is working fine. An issue I would like to solve is when I enter manually a page URL that is C# controller's action path(in the example I provided below it is /Proposal/Customers) - my view is loaded on a whole page. What I want to be called is a .state named 'customers' in my example, or something like that. My example code is(part of my proposalConfig.js):
.state('customers', {
url: 'AllCustomers',
views: {
containerOne": {
templateUrl: '/Proposal/Customers'
}
}
});
On my back-end I have a ProposalController.cs and an action method Customers that calls a Customers.cshtml view.
Anyone has an idea how to solve this?
EDIT
The same thing happens if, instead of 'AllCustomers' I put '/Proposal/Customers', and then after the first load of a .state I refresh a page.
I forgot to mention that I have $locationProvider.hashPrefix('!').html5Mode(true); in a proposalConfig.js file.
If you mean that the entire page html markup (html tag, body tag and such)is being returned when you only want the specific content of the Customer.cshtml, which I also assume only has what you want in it, its probably because your view has a shared view start layout. Put this in Customer.cshtml
#{
Layout = null ;
}
This is what I've tried:
In Controller:
public ActionResult Detail()
{
List<string> list = new List<String>();
return View(list);
}
In View of Detail:
#model dynamic
<!-- some HTML -->
<script>
#Model.add(document.getElementById("input_box").value);
</script>
Problem is, intelli-sense is not detecting that the passed in object is a List so #Model.add doesn't work.
My goal is to pass a list into the view so I can gather data from user inputs, and then use that list of data in my controller. Any ideas?
The current problem can be solved by using a statically typed model:
#model List<string>
<!-- some HTML -->
<script>
#Model.Add(document.getElementById("input_box").value);
</script>
However, you'll quickly hit another wall when the compiler complains that it doesn't know what document is. That's because the Razor view is rendered on the server side, but document is an object provided by the browser on the client side. You simply can't dynamically add elements to this server-side list from the client. You'll need to encode your list somehow for the client to be able to read, say in a JavaScript array. Then dynamically modify the list on the client side, perhaps using the JavaScript .push method. And then post this back to the controller in a separate action.
It's not going to be that simple.
Firstly, the Razor statement you used
#Model.add(document.getElementById("input_box").value);
is not a valid C# statement. It will cause an exception when you try to open the page, because the Model type you're using (List<T>) does not have a method called add (though it has Add), and further because that javascript is not valid Razor code either :)
Secondly, you seem to be confused about how the server-client interaction works.
You need to carefully think about how what you want to do can be realized--
For you to be able to get information from the client (the user's browser), you first need to render the page, send it to the client, let the user (or whatever) enter the information, and then get them to send it back to a Controller action. At the moment your page is not even rendering, so you couldn't hope to get data from anyone.
This can still be solved in numerous ways, one of which is to use Html.BeginForm(...) to create a simple form and have an input element and a submit button somewhere in there.
If you can get the user to submit the data back to you, you can then do whatever you like with the data in the previously mentioned Controller action.
Okay, solved it by creating a global array in the JavaScript of the View, then passing it to a Controller function as a parameter with Ajax.
i have two cshtml page one which has the link the makes the popup appear, and another with just the form data and would like to know how i would be able to display the form on the popup, as i am using MVC, to create the form, the plage which has link on is in the ~/views/client/index.cshtml while thr form is ~/views/fb/CreateOrEidt.cshtml the colller is called "FB" and the methos to call is edit, it take the parameter Id
I have tried #hmtl.renderpartial, #html.renderaction, #hmtl.partial, #html.action,
I have also tied these method with a { after the # and the end, doesnt give me a error bust still doesn't display information
The error which i get is razor canot convert type object to void
It's a little unclear what you're trying to achieve but from the error you've mentioned when calling Html.RenderAction you need to call using something like:
#{
Html.RenderAction("ACTIONNAME");
}
Calling the other methods against an action view won't work.
If you're trying to display a view inside a popup though you want to be careful that you don't end up including your layout page etc as this is potentially not the look you're going for..!
The pattern I generally implement for things like this is to simply partial out the form bit that I need to reuse and call renderpartial to display this where I need it. This renders just the html I'm after then and not the whole view (+ layout(s)).
I want to modify the content of a div in my shared layout when there is an update at my database. Whats the best way to go about it ? Timers to check database + somehow update view from controller ? In view c# functions ? ajax ?(don't know much about it) or some other way ? Thanks in advance.
Use setTimeout utility of javascript to get timer behavior.
Create a Controller Action and its associated partial view which will have the content you need to load dynamically. You can return a formatted Html from the view or a structured Json object from the controller action whichever is suitable for you..
considering that your following is your DIV tag.
<div id="dynamicContent"></div>
use
$(function(){
var function updatecontent()
{
$("#dynamicContent").load(URL)
setTimeout(updatecontent,5000);
}
setTimeout(updatecontent,5000);
});
to load content dynamically, url would be
YourDomain.com/Controller/Action
$.load()
will load the content of partial view using Ajax, and you will get a nice behavior on page.
I have an MVC view that contains a number of partial views. These partial views are populated using partial requests so the controller for the view itself doesn't pass any data to them. Is it possible to reload the data in one of those partial views if an action was triggered in another? For example, one partial view has a jqGrid and I want to refresh the data in another partial view when a user selects a new row in this grid.
Is there a code example for this scenario (in C#) that I can look at to see what am I doing wrong? I am using ajax calls to trigger a new request but non of the partial views are refreshed so I am not sure if the issue is with the routing, the controller, or if this even possible at all!
Thanks!
If your partial view action returns a ViewResult, the response contains an HTML chunk. However, an Ajax call does not automatically insert the result into the DOM, as the result can be in any number of formats and/or might need additional processing before the DOM is updated. So, in order to get your partial view refreshed, you need to take the result of the Ajax call and insert it in the right place in the DOM tree.
jQuery has a nifty load() method, that will encapsulate this process for you. It'll make the Ajax call, take the result and replace the inner HTML of the selected element. You can even pass it your own function to be executed before it inserts it in the DOM tree, if you need to transform the result in any way.
Side note: jQuery.load() strips scripts returned in the result. It does retain them for execution in certain sceanrios, but it does not even execute them in other scenarios. So, if your partial view contains scripts, you might consider updating the DOM tree yourself.
All that this has nothing to do with your C# code, which runs on the server side.
However, you do have the ability to make your action a little bit smarter by checking if the request is plain HTML, so the result will be rendered by the browser directly, or if it's an Ajax call and the result will be processed by your script before getting in the DOM. This check is done using the Request extension method IsAjaxRequest.