Thursday 19 June 2014

Records as radio buttons create dynamically

I have a requirement where a set of records has to be displayed as radio button dynamically, the record being fetched from DB.
Let’s start with deciding the ‘rdassets’ as the content holder of the radio buttons.
<div id="rdassets"></div>

We will do an ajax request to the controller with some parameter passed. The result will be checked for null, and then the fetched records will be looped through and appended to the ‘rdassets’. Here below is the ajax call along with the solution to add records as radio buttons in the page.

$("#BtnSearch").click(function () {
            var param = $("#somepagecontrol").val();
            $.ajax({
                url: "/Controller/Method/",
                type: 'POST',
                dataType: 'json',
                data: { Param: param },
                success: function (result) {
                    if (result != null) {
                        $.each(result, function () {
                            $("#rdassets").append(
                                $('<input />', {
                                    type: 'radio',
                                    name: 'rdoAsset',
                                    id: this. RequestId
                                })
                            );
                            $("#rdassets").append(
                                $('<label />', {
                                    'text': this.Item
                                })
                            )
                        });                       
                    }
                    else {

                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Error in fetching details.');
                }
            });
        });


The ajax response will look similar to the below sample:

[{"RequestId":110,"Item":"Samsung TV"},{"RequestId":103,"Item":"Sample Asset 003"},{"RequestId":206,"Item":"Toyota Cars"}]

Parameter passing at Url.Action

What is my goal: Open a model window (partial page) through a javascript function, passing a parameter with it.
Where the challenge is: The parameter cannot be directly added in the url Action.
What is the solution: Add a hardcoded parameter value and replace it in the next step
Normally we would like to pass the parameter in the url in the below way:
reqid = paramvalue;
url = '@Url.Action("PageName", new { requestId = reqid })';

This above code doesn’t work. Below is the sample code which works perfectly. We set a dummy value “-1” as the parameter in the first step. In the next step we replace the dummy value with the actual one.

<div id="modelwindow">
</div>

function ViewRecord(objValue) {       
        reqid = objValue;
        url = '@Url.Action("PageName", new { requestId = "-1" })';
        url = url.replace("-1", reqid);
        modelwindow = $("#modelwindow")
            .kendoWindow({
                title: true,
                modal: true,
                visible: false,
                resizable: true,
                width: '800px',
                content: url
            }).data("kendoWindow");

            modelwindow.title("Request Details");
            modelwindow.center().open();

    }