Kendo UI Grid-调用MVC Url.Action的ClientTemplate调用（错误地）两个不同的操作

Question

1. I have some data that loads into a Kendo grid via the Ajax binding.
2. Within one of the columns there's a ClientTemplate that calls a javascript method (showAll).
3. This method will call an action and get the details of the data, putting it into a json response, and then open a jquery-ui dialog to show the details.
4. When the user clicks on the link in the grid the HttpGet is triggered for the GetDetails action BUT, the problem is, it is also triggered for the entire page's action (Index).

The question, I guess, is what is causing the Index action to be triggered? Because, the dialog will show, the detailed data will populate, but once I close the dialog all the filter textboxes will be reset and the grid will reload and the data within it.

Shouldn't the only action called be the GetDetails?

Any hints will be greatly appreciated!

Code:

@(Html.Kendo().Grid<LogViewModel>()
    .Name("LogGrid")
    .Columns(column =>
    {
        column.Bound(x => x.StuffCount).Title("Stuff").Width(70)
            .ClientTemplate("<a onclick=\"showAll('" + "#= Id #')\"" + " href=''>#= StuffCount #</a>");
    })
    .DataSource(dataBinding => dataBinding
                .Ajax()
                .PageSize(50)
                .Read(read => read.Action("GetData", "Summary")
                    .Data("getSearchFilters"))
                .Model(model => model.Id(o => o.Id)))
            .Events(e => e
                .DataBound("onGridItemsDatabound"))
            .Pageable(paging => paging.Refresh(true))
)}

<div id="dialog-message" title="" style="display: none">
    <p id="msg"></p>    
</div>


<script type="text/javascript">
    var showAll= function (id) {
        var url = '@Url.Action("GetDetails", "Summary")' + "/" + id;
        var sTitle = 'title text';
        $.getJSON(url, null, 
            function (data) {
                $("#dialog-message").dialog({ title: sTitle });
                $("#msg").text(data.details);
                showMessage();        
            });
    };

    var showMessage = function () {
        $("#dialog-message").dialog({
            modal: true,
            draggable: false,
            resizable: false,
            buttons: {
                Ok: function() {
                    $(this).dialog("close");
                }
            }
        });
    };
</script>

The controller methods (content removed for brevity

public ActionResult Index(...)
{
    ...
}

public ActionResult GetDetails(Guid id)
{
    ... (get data from repository)

    return Json(data, JsonRequestBehavior.AllowGet);
}

Answer 1

I posted the same question on the Telerik forum. Their admin pointed me in the right direction:

• http://www.kendoui.com/forums/mvc/grid/kendo-ui-grid---clienttemplate-calling-mvc-url-action-calls-(incorrectly)-two-different-actions.aspx
• Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

Turns out I had to add the void to the href to call the javascript and stay on the page. href="javascript:void(0)"