I want to use Url.Action with Knockout - asp.net-mvc

Question

I am new to knockout and I am having trouble getting the syntax right when using it with MVC markup.
For example this code here;
<a href="text.Answer" target="_blank">
<span style="display:inline-block">
<img src="#Url.Action("GetPhotoThumbnail", new { path = text.Answer, width = 120, height = 80 })" alt="Property Image" style="margin-top: 5px;" />
</span>
</a>
EDIT
So "Answer" is in the ViewModel and in knockout you would type data-bind="text:Answer" but here I have put in 2 places text.Answer. How do I replace text.Answer in the above code with the correct Knockout markup?
I know the above code will not work but this is a simplified way of showing the problem. I want to data-bind to text.Answer. What is the correct syntax for doing that?

Answer 1

If I understood you correctly that your text.Answer is something bind in client side.
You can't mix #Url.Action with client side variables
Try creating your URL like this
"#Url.Action("GetPhotoThumbnail")?path="+variable1+"&width="+variable2+"&height=" +variable3

Answer 2

You could pass the values you need into the ViewModel.
<div id="test">
<a href="#" data-bind="attr: { href: href }" target="_blank">
<span style="display:inline-block">
<img src="" data-bind="attr: { src: imageUrl }" alt="Property Image" style="margin-top: 5px;" />
</span>
</a>
</div>
<script type="text/javascript">
function MyViewModel(defaultValues) {
this.href = defaultValues.href;
this.imageUrl = defaltValues.imageUrl
}
var viewModel = new MyViewModel({
imageUrl: '#Url.Action("GetPhotoThumbnail", new { path = text.Answer, width = 120, height = 80 })',
href: '#Url.Action("Test")'
});
ko.applyBindings(viewModel, document.getElementById('test'));
</script>

Answer 3

I'm guessing you've got a view model binded to this part of the DOM, so you should be able to use the data-bind attribute and the attr binding to achieve the following:
<a href="" data-bind="attr : { href: text.Answer } " target="_blank">
<span style="display:inline-block">
<img src="#Url.Action("GetPhotoThumbnail", new { path = text.Answer, width = 120, height = 80 })" alt="Property Image" style="margin-top: 5px;" />
</span>
</a>
See http://knockoutjs.com/documentation/attr-binding.html for more details on this binding.
Also you'll need to make the view model generate you the img[src] attribute value so try something like:
<img data-bind="attr:{ src: text.answerImgSrc() } " alt="Property Image" style="margin-top: 5px;" />