Отправить объектный список хранения другому контроллеру для заполнения компонентов? - PullRequest
0 голосов
/ 14 февраля 2019

Я пытаюсь создать веб-сайт, который использует ReactJS.NET с ASP.NET MVC 4. Я пытаюсь отправить данные, которые заполнили компонент с контроллера на одной странице, на контроллер на другой через ActionLink или что-то ещелучше.

Я пытался проверить документацию на ReactJS.NET, но я извиняюсь, если есть другие источники, которые я пропустил.Я знаю, как заполнять объекты из контроллера на компонент в файле ReactJS JSX, но я не уверен, как передать этот же объект другому контроллеру с соответствующим ActionLink внутри HTML-таблицы, которую я использую с ReactJS.NET скрипт.

Контроллер Я пытаюсь передать данные:

using AffirmativeServiceSystem.Models;
using AffirmativeSupportSystem.CalendarComponents;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AffirmativeServiceSystem.Controllers
{
    public class TicketController : Controller
    {
        private static readonly IList<ApptConfirmItem> logs;

        private static readonly IEnumerable<ApptConfirmItem> combined;

        static TicketController()
        {
            logs = new List<ApptConfirmItem>();

            combined = logs;



            //logs.Concat(addAppts);
        }
        // GET: Queue
        public ActionResult Queue()
        {

            return View(combined);
        }
    }
}

Контроллер, заполняющий данные, которые я буду передавать из предыдущего компонента React:

public class QueueController : Controller
    {
        private static readonly IList<ApptTaskTicket> tickets;

        private static readonly IEnumerable<ApptTaskTicket> combined;

        static QueueController()
        {
            tickets = new List<ApptTaskTicket>
            {
                new ApptTaskTicket
                {
                    id = Guid.NewGuid(),
                    summary = "Foopy",
                    description = "Please set up Foop Dawg."
                },
                new ApptTaskTicket
                {
                    id = Guid.NewGuid(),
                    summary = "Milk man",
                    description = "Milkman here I come"
                },
                new ApptTaskTicket
                {
                    id = Guid.NewGuid(),
                    summary = "InMode Presentation",
                    description = "Upcoming presentation next month"
                },
            };

            CalendarQuickStart eventFetcher = new CalendarQuickStart();

            IList<ApptTaskTicket> addAppts = eventFetcher.LoadAppointmentTasks();

            tickets.Concat(addAppts);
        }
        // GET: Queue
        public ActionResult Queue()
        {

            return View(combined);
        }
    }

Предыдущий скрипт компонента React, из которого я передаю данные:

class Queue extends React.Component {
    constructor(props) {
        super(props);
        this.state = { data: this.props.initialData };
        this.handleTicketSubmit = this.handleTicketSubmit.bind(this);
    }
    loadTicketsFromServer() {
        const xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = () => {
            const data = JSON.parse(xhr.responseText);
            this.setState({ data: data });
        };
        xhr.send();
    }
    handleTicketSubmit(ticket) {
        const tickets = this.state.data;
        // Optimistically set an id on the new comment. It will be replaced by an
        // id generated by the server. In a production application you would likely
        // use a more robust system for ID generation.
        comment.Id = comments.length + 1;
        const newComments = comments.concat([comment]);
        this.setState({ data: newComments });

        const data = new FormData();
        data.append('Summary', ticket.summary);
        data.append('Description', ticket.description);

        const xhr = new XMLHttpRequest();
        xhr.open('post', this.props.submitUrl, true);
        xhr.onload = () => this.loadTicketsFromServer();
        xhr.send(data);
    }
    componentDidMount() {
        window.setInterval(() => this.loadTicketsFromServer(), this.props.pollInterval);
    }
    render() {
        return (
            <div className="queue">
                <h1>Affirm Queue</h1>



                <TicketList data={this.state.data} />

            </div>
        );
    }
}

class TicketList extends React.Component {
    render() {
        const ticketNodes = this.props.data.map(ticket => (
            <Ticket key={ticket.id}>

                    <td>{ticket.summary}</td> < td > { ticket.description }</td><td>{ticket.currentApptTime}</td>

            </Ticket>
        ));
        const ticketRaw = this.props.data.map(ticket => (
            <tr>
                    <td>{ticket.summary}</td><td>{ticket.id}</td><td>{ticket.description}</td><td>{ticket.currentApptTime}</td>
                </tr>
        ));
        return (
            <div className="ticketList">

                <table id="affirmTable" className="table table-bordered table-hover table-striped">
                    <tbody>
                        {ticketNodes}
                        </tbody>
                </table>
            </div>
        );
    }
}

function createRemarkable() {
    var remarkable = (("undefined" != typeof global) && (global.Remarkable)) ? global.Remarkable : window.Remarkable;
    return new remarkable();
}

class Ticket extends React.Component {
    rawMarkup() {
        var md = createRemarkable();
        var rawMarkup = md.render(this.props.children.toString());
        return { __html: rawMarkup };
    }
    render() {
        return (

                <tr className="ticket" href="">


                        {React.Children.map(this.props.children, (child, i) => {
                            // Ignore the first child
                            return child
                        })}

                </tr>


        );
    }
}

Модель данных, которую я пытаюсь передать между контроллерами:

public class ApptTaskTicket : MasterTicket
    {
        public DateTime currentApptTime;
        public string patientName;
        //TODO: Create foreign relationship
        public Guid subjectPrsnlId;
        public string patientPhone;
        public string patientEmail;
        public string preferredContactMethod;
    }

Мне интересно, если яв идеале следует создать соответствующий ActionLink внутри href каждого дочернего «билета» внутри данной таблицы в jsx-скрипте компонента Queue, но я уверен, что есть кое-что лучше, о чем я просто не знаю.Может ли кто-нибудь помочь направить меня в правильном направлении?Надеюсь, это не выглядит как перегрузка ...

...