ajax - partial view - controller dead end

November 28, 2016, at 9:49 PM

This is my first question on here - so go easy :)

I'm fairly new to mvc, my background is in web forms.

My problem -

I have a single page with a number of menu links - I have jquery click events attached to the links that when clicked use ajax to call a controller to get the the partial view - I then load this into a holding div via the ajax call back function to render the partial view.

One of the partial views is a 'New message' partial for composing a message, I need to be able to add attachments to this view. To do that I load in a another partial via ajax in the form of a model popup. I load the model into a separate holding div so as not to lose the compose view.

I use a FormMethod.Post to the controller where I populate my attachments view model.

It is at this point I reach a dead end - I don't know how to rebind the 'New message' view to add the attachments?

The only way I know how to do it would be client side where I can inject the 'New message' partial view back into the holding div with the updated model. But I cant get to any JavaScript.

Is there a way to do this from the controller? or have I shot myself in the foot going down the route of loading the partial via ajax into holding divs?

any help would be greatly appreciated.

Thanks Tim

My code

Main View

    <div class="collapse navbar-collapse navbar-left" id="message-bar">
            <ul class="nav navbar-nav message-bar-list">
                    <a data-js="Message" data-view-target="newMessage" href="#NewMessage">New Message</a>
                    <a href="#">Delete</a>
                    <a href="#">Move to Folder</a>
                        <a href="#">Reply</a>
                <li class="send" style="display:none; ">
                    <a data-js="Message" data-view-target="newAttachment" href="#addAttachment">Add Attachments</a>
                @*<li class="send" style=" display:none; ">
                    <a href=" #send">Send</a>
            <!--end of navbar-nav-->
        <div class="col-xs-12 col-sm-10 col-md-10 col-lg-10">
        <div class="smPlaceholder">@Html.Partial("_Inbox", Model)</div>            
        <div class="hide" id="newMessage"></div> 
        <div class="hide" id="newAttachment"></div> 

My New message partial view

    @ModelType Model.ViewModel.Messages.Message
    @Using (Ajax.BeginForm("NewMessage", "Communication", New AjaxOptions With {.HttpMethod = "Post",
                                                                            .UpdateTargetId = "smPlaceholder",
                                                                            .OnSuccess = ""}))
    @<div class="new-message">
 @Html.TextBoxFor(Function(model) model.Message(0).Subject, New With {Key .placeholder = "Subject"})
 @Html.Partial("_AttachmentList", Model)
 <hr />
 @Html.TextAreaFor(Function(model) model.Message(0).Body, New With {.cols = "80", .rows = "4"})
 <button type="submit" class="button tp-green">Send Message</button>

End Using

My Add attachments partial view

    @ModelType  Model.ViewModel.Documents.Document
@Using (Html.BeginForm("fileUpload", "Communication", FormMethod.Post, New With {.enctype = "multipart/form-data"}))
@*@Html.HiddenFor(Function(model) model.FilesToBeUploaded)*@
     <input type="file" id="fileToUpload" name="files" value="" multiple="multiple" />
     <div id="selectedFiles"></div>

@<div class="col-xs-12 message-attachement-content currentDocuments document-list">
        <h5>Existing documents</h5>
            @For i = 0 To Model.Document.Count - 1
            Dim a As Integer = i
             @<li class="documentListLI">
               @Html.HiddenFor(Function(model) model.Document(a).Id)
               @Html.HiddenFor(Function(model) model.Document(a).Description)
               @Html.CheckBoxFor(Function(model) model.Document(a).Checked, New With {.data_docid = Model.Document(a).Id, .data_name = Model.Document(a).Description}) <span>@Model.Document(a).Description</span>
     <input type="submit" value="Upload Document" title="Upload" />
End Using        

My JavaScript

    $('*[data-js="Message"]').on().off().on('click', function () {

            $('.send').css("display", "block")
            var dto = {
                Item: $(this).attr("data-view-target")
            GlobalFunctions.callAjaxMethod("/Communication/addPartialView", dto, callback)
            function callback(data) {
                if (data.page == "newMessage") {
                    if ($('#newMessage').html() == "") {
                } else if (data.page == "newAttachment") {
                    if ($('#newAttachment').html() == "") {

My Controller

    Function fileUpload(ByVal doc As Model.ViewModel.Documents.Document, files As HttpPostedFileBase()) As ActionResult
        'save uploaded attachments as temp files
        Dim fileName As String = ""
        Dim fileTypeTemp As String = ""
        Dim data As Byte() = {}
        Dim filesize As Integer = 0

        Dim temp_name As String = ""
        For Each item As HttpPostedFileBase In files
            If Not item Is Nothing Then
                If item.ContentLength > 0 Then
                    fileName = item.FileName
                    Dim target As New MemoryStream()
                    data = target.ToArray()
                    temp_name = Guid.NewGuid().ToString()
                    fileTypeTemp = System.IO.Path.GetExtension(fileName).ToString().ToLower()
                    filesize = item.ContentLength
                End If
            End If
            'call service to save files
            _ClientSecureMessageService.saveTempFileAttachment(data, Session("sessionId"), temp_name, fileName, Guid.NewGuid(), filesize, 1)
        'save system held docs as temp attachment files
        For Each item In doc.Document
            If item.Checked = True Then
            End If
        'Need to populate the message/attachment object and rebind the new message view
        Return RedirectToAction("addPartialView", New With {.Item = "#NewMessage"})
    End Function

Ignore the return as this doesnt work and is the point at which I've hit a dead end.

Hope this helps?

Rent Charter Buses Company
Problems using Slick jQuery slider

Problems using Slick jQuery slider

I'm trying to implement the Slick jQuery

Need to display empty if select option is &ldquo;&rdquo; want to use a javascript ternary

Need to display empty if select option is “” want to use a javascript ternary

I have several select dropdowns in which if they are not "" then I want to use up displaying the value along with adding a \n for a new line

Calling VBScript procedure stops working after adding jQuery to HTA

Calling VBScript procedure stops working after adding jQuery to HTA

I'm trying to build an HTA using both VBScript and jQuery

onClick within Chrome Extension not working

onClick within Chrome Extension not working

This seems to be the easiest thing to do, but it's just not workingIn a normal browser the