Call js function from code-behind (Not as startupScript)

Question

Basically what I want to do is:

1. Click on a button to delete a record.
2. Delete the record if a specific column (Location) is null (this is done and works fine)
3. Delete the record, BUT if the specific column is not null, ask the user to confirm.

So step 3 is the tricky part. With the AJAX, I call the deleteChannel(url) that you see below, which calls the proper method in code-behind. Now here is the tricky part:

   if (channel != null && channel.Location != null)
    {
         // How do I do this? (Notice that this is code-behind)
         ShowDialogThatAsksUserToConfirm()
    }

The code: ShowDialogThatAsksUserToConfirm() needs to call back to the client saying that "The Location column is not null", and wait for user to say delete anyway, or cancel.

I have this code that will call a method in code behind:

function deleteChannel(url) {

$.ajax({
    url: url,
    type: "POST",
    cache: false,
    contentType: 'application/html; charset=utf-8',
    data: $("form").serialize(),
    dataType: 'html',
    success: function (msg) {
        showDialog('successDiv');
    },
    error: function (msg) {
        alert("error");
        showDialog('errorDiv');
    }
});
}

And the showDialog(...) looks like this:

function showDialog(divID) {
$("#" + divID).dialog({
    show: "clip",
    hide: "clip",
    buttons: {
        Ok: function () {
            $(this).dialog("close");
        }
    }
});
}

The code-behind looks like this:

[HttpPost]
    public ActionResult DeleteChannel(int id)
    {
        var statusCode = new HttpStatusCode();

        using (var context = new MaaneGrisContext())
        {
            var channel = context.Channels.FirstOrDefault(x => x.ID == id);

            if (channel != null && channel.Location != null)
            {
                if (Confirmation()) //The Confirmation() method not implemented yet, but it should ask user to confirm
                {
                    context.Channels.Remove(channel);
                    context.SaveChanges();

                    List<ChannelModel> updatedChannelList = new List<ChannelModel>();
                    context.Channels.AddRange(context.Channels);



                    return View("ChannelDetails", updatedChannelList);
                }
            }
  }

Here is the View:

<table style="border: ridge 1px">
    <tr>
        <th>Name</th>
        ...
    </tr>
    @{
        foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(m => item.ChannelName)</td>
                <td>@Html.DisplayFor(m => item.Description)</td>
                <td>@Html.DisplayFor(m => item.Unit)</td>
                <td>@Html.DisplayFor(m => item.Location.StableName)</td>
                <td>@Html.DisplayFor(m => item.CreationDate)</td>
                <td>@Html.DisplayFor(m => item.LastEdited)</td>
                <td>@Html.DisplayFor(m => item.ExtraNote)</td>
                <td><a href="@Url.Action("CopyChannel", "Channel", new { id = item.ID })"><span class="glyphicon glyphicon-copy"></span></a></td>
                <td><a href="@Url.Action("EditChannel", "Channel", new { id = item.ID })"><span class="glyphicon glyphicon-edit"></span></a></td>
                <td><a href="#" onclick="deleteChannel('@Url.Action("DeleteChannel", "Channel", new { id = item.ID })')">
                       <span class="glyphicon glyphicon-remove"></span></a>                        
                </td>
            </tr>
        }
    }        
</table>
<br/><br/>
<div style="display: none;">
   @* @{ Html.RenderPartial("_CreateChannel"); } *@
</div>
<h5>@Html.ActionLink("Opret en ny kanal", "RegisterChannel", "Channel")</h5>

<div id="cautionDiv" title="Bekræft sletning" style="display: none;">
    <p style="color: red;">The channel has a location. Are you sure you want to delete?</p>
</div>

<div id="successDiv" title="Info" style="display: none;">
    <p style="color: green;">Deleted</p>
</div>

This is just my approach, and is not final, if there are better solutions, please let me know

Answer 1

You can't call js from a codebehind, but your ajax method can return an indication for asking the user:

if (channel != null && channel.Location != null)
{
   return 'cannot-delete';
}

and the ajax method would see that on it's success function, and prompt the user:

$.ajax({
    url: url,
    type: "POST",
    cache: false,
    contentType: 'application/html; charset=utf-8',
    data: $("form").serialize(),
    dataType: 'html',
    success: function (msg) {
        if (msg == 'cannot-delete') {
             ShowDialogThatAsksUserToConfirm();
        } else showDialog('successDiv');
    },
    error: function (msg) {
        alert("error");
        showDialog('errorDiv');
    }
});

The method ShowDialogThatAsksUserToConfirm should ask for the users's confirmation in javascript, and if allowed, submit a forced delete of the record.