Knockout Js, JQuery UI Dialog and Partial view

Question

I have a requirement whereby I need to load in Partial View(razor) in Jquery Modal dialog, the problem is I am not able to integrate with Knockout. The implementation will be like this, as a user enters a site, I need to show him a Modal dialog (pop-up -- Partial view) with Knockout binding. Any help would be much appreciated.

Answer 1

Since you are going to be showing the dialog immediately one approach you can use is to simply render the Partial View directly to the main page as a template.

You would define your partial view like so:

<script id="myPopupTemplate" type="text/html">
   <span data-bind="text: Name"></span>
   <span data-bind="text: Age"></span>
   <button data-bind="click: doSomething">Do Stuff</button>
</script>

And in your main page, you simply render the template to the bottom of the page:

@Html.RenderPartial("MyPartialView")

Now you can use the template binding as you normally would, except this time you can wrap it all in the structure you need for the modal dialog using jQuery.

<div data-bind="template: {name: 'myPopupTemplate', data: myData}">
</div>